Clear Theme

Yes it CAN be done, but it’s a hack:
image

I added this one to my lovelace config:

resources:
  - type: css
    url: /local/styles.css?v=0.1

(the version is in case I update the css)
Then I created styles.css in local, and with this as content:

body {
  --primary-color: white !important;
}

(It was after an evening of trial and error and bits of information here and there on the web)

About the Harmony card: thanks! It changes with the activity, so when the radio plays: this f.i. is shown:
image

… but I might just dump the cards with photos after all, to have a cleaner look…

@Nitram that looks great! What font are you using for your Automatisering card? I’ve managed to import Open Sans but I’m finding that line spacing is occasionally an issue

Thanks! It’s Raleway: https://fonts.google.com/specimen/Raleway

1 Like

“Canary” (alarm) and some other standard cards seem to not care about custom fonts, I have to look into that…

Can you add a weblink or a section to an entities card and check if it’s readable?

You could use a markdown card, and a vertical or horizontal stack card, not sure if you can get closer to that than this. What do you want to do with it?

You can switch them with an automation after sunset. I just found no way to switch the background with an automation yet.

Is this how you managed to change the font globally as well?

I have the problem that these parts are all in primary-color, therefore I cannot set the primary-color to the same color as the card background without loosing the ability to use weblinks / section titles:

Yes, by adding this to the resources in the Lovelace config, it also changed the font on other places:

resources:
  - type: css
    url: 'https://fonts.googleapis.com/css?family=Raleway'
1 Like

Ok, sorry, I misunderstood the question!
Tried a link in a card, and it’s also white and unreadable. It looks like a challenge :slight_smile:

OK, I’m not quite getting the same result as you -

Note on the left menu, my text is still coming up in Roboto whilst yours appears in Raleway.
Have tried a few methods - in Lovelace:

  - url: /local/styles.css?v=0.05
    type: css
  - url: 'https://fonts.googleapis.com/css?family=Raleway'
    type: css

And in /config/www/styles.css:

@import url('https://fonts.googleapis.com/css?family=Raleway');
body {
  font-family: Raleway !important;
}
paper-icon-item span {
  font-family: Raleway !important;
}

Plus deleting caches and refreshing etc - there’s some elements that always seem to be overridden, not sure how to get past that…

I don’t think the styles.css has any value here. The only thing I did, was adding the resource to Lovelace and changed the font there. But maybe you didn’t set it everywhere in the theme, like this?

  primary-font-family: 'Raleway,sans-serif'
  paper-font-common-base_-_font-family: "var(--primary-font-family)"
  paper-font-common-code_-_font-family: "var(--primary-font-family)"
  paper-font-body1_-_font-family: "var(--primary-font-family)"
  paper-font-subhead_-_font-family: "var(--primary-font-family)"
  paper-font-headline_-_font-family: "var(--primary-font-family)"
  paper-font-caption_-_font-family: "var(--primary-font-family)"
  paper-font-title_-_font-family: "var(--primary-font-family)"

Btw, nice work. Some good ideas here, like the Recycle Bin days! :slight_smile:

Thanks! It was a battle to get that working because my council has no API and the results are all generated in-line by javascript - see here: https://community.home-assistant.io/t/bash-scripting-torquay-refuse-collection-sensor/100376/2

I also have a dark theme but it’s not quite as refined as @naofireblade’s:

I totally forgot to add the fonts to my theme in config.yaml though, will give that a go now! Thanks!

Success!

Font: Poppins

6 Likes

Thank you!
Can you also share your config for your presence card at the top right?

That one also has a button to open a text field where I can enter a reminder for a person and this person get’s a notification as soon has she comes home.

You first have to set up a device tracker for each person: https://www.home-assistant.io/components/device_tracker/

After that you can include the card.

The Card

type: horizontal-stack
title: Familie
cards:
  - type: glance
    columns: 2
    entities:
      - device_tracker.iphone_user1
      - input_text.reminder_user1
    show_name: false
  - type: glance
    columns: 2
    entities:
      - device_tracker.iphone_user2
      - input_text.reminder_user2
    show_name: false

Configuration for Input Field

input_text:
  reminder_user1:
    name: "Reminder"
  reminder_user2:
    name: "Reminder"

Automation for Reminder

- alias: Reminder for User 1
  trigger:
  - platform: state
    entity_id: device_tracker.iphone_user1
    to: home
  condition: []
  action:
  - service: notify.ios_iphone_user1
    data:
      title: Reminder
      message: "{{ states.input_text.reminder_user1.state }}"
  - service: input_text.set_value
    data_template:
      entity_id: input_text.reminder_user1
      value: ''

- alias: Reminder for User 2
  trigger:
  - platform: state
    entity_id: device_tracker.iphone_user2
    to: home
  condition: []
  action:
  - service: notify.ios_iphone_user2
    data:
      title: Reminder
      message: "{{ states.input_text.reminder_user2.state }}"
  - service: input_text.set_value
    data_template:
      entity_id: input_text.reminder_user2
      value: ''
2 Likes

Is there another way to call the background image into Lovelace? I use an automation to select my theme based on day/night mode and I want to be able to automagically switch between clear light and clear dark with their associated backgrounds. If I put “background: center / cover no-repeat url(”/local/background.jpeg") fixed" into the Lovelace config it will apply to ALL themes.