Clear Theme


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
      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

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


My question for the day, I manage to get working Except for on my tracker panel card. All loads except this one:


But if I want change theme for day and night also with background? But how I can do it?


You will need to do this in automation I assume. sorry havent done that yet so will wait to see what the others say :slight_smile:


It’s a card not an entity


oh crap! haha sorry, you right - very new still to hassio


Hello! I was just trying to “install” this theme - also tried others.

Is there a detailed documentation how to install them?
I’ve used this official docu.

Here is what I’ve done:
In configuration.yaml:

  themes: !include themes.yaml

In themes.yaml I’ve copied your code above beginning with:

text-color: …

Can anyone help me?


Looks good so far. Everything beginning from #Colors must be indented by 2 spaces.
After restart home assistant you should be able to select the theme in your profile (click on the circle with your initial letter in the top left corner).


Thank you!

I feel so dump right now.
I was looking in General Settings (like mentioned in the docs for older versions).

Thumbs up!


As of Home Assistant 0.88 the box shadow modifications used in this theme are broken.

However, in 0.89 the ability to change the box shadows of cards will be reintroduced, but in a new form.

The new variable is:

ha-card-box-shadow: 'inset 0px 0px 0px 1px var(--border-color)'

Also note that paper-card-background-color is deprecated and should be replaced by ha-card-background.


For some reason my primary-color is not updated but stays blue.The other colours work fine? Yaml indenting is okay from what I can tell. Any idea why this might be the case?


Thank you very much. I will update the post as soon as I can test the theme on the 0.89 release.


Can you please also let me know when you’re done? :slight_smile:

By the way, I have added slightly rounded corners with ha-card-border-radius: 5px for the cards to your theme for me.
This looks imho even more material like.

Still a lot to tinker and play with :smile:
Thank you for your great work!

Btw, how did you combine your Button Cards for the lighting modes within one card @naofireblade ?
No matter what I try, I always have empty space between the buttons (see screenshot top right).


nice indeed
missed it before maybe, but what’s the card in blue for the weather conditions? could you share the code for that please? I like the condensed information set :wink: