Clear Theme

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.

I found no way yet :confused:

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…

Do you know how to get into the UI raw config editor?

If so, here is a sample of my one background code. you can also link it to a local image