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 
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!
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!
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.
I found no way yet 
Maybe you could create a custom_component with a service to overwrite the image in the WWW folder at certain times. But I guess the problem with this approach is the browser cache.
with an individual card I do this with card modder:
- type: custom:card-modder
style:
background-image: url("/local/lovelace/images/weather-background-[[ sun.sun.state ]].png")
background-size: 100% 400px
--primary-text-color: var(--primary-text-color)
--secondary-text-color: var(--secondary-text-color)
--paper-item-icon-color: var(--primary-text-color) #small variation icons
card:
I imagine one could create a template sensor which is called in the Lovelace configuration, if this would be possible directly? (haven’t done a thing like that myself for global setup, but seems like it should be possible…
But can anybody write step by step how setup background as in the first post ?
Have your automation call a shell command that copies the appropriate background file to one place.
But i dont know how do it…
