Clear Theme


I followed these instructions but no background is showing…

Where exactly do I need to put the code in the raw editor?


dear all, same problem here. Whatever I try no picture as background.
So I hope you get an answer than you can tell me. :joy:


Yup. I thought it was just me. I tried to past that background line everywhere with no success.


Hi guys,

as this thread getting longer and longer please excuse if the question already was asked.

Can I install this genius theme in my configuration without being in Lovelace yaml mode? I setup my config as I need it and don’t want to make it again. Also I want to keep the easy customize buttons in the ui to change it without the editor


I’m not sure if you can edit your configuration.yaml to include the themes.yaml where the theme code goas in

But you don’t need lovelace yaml mode. You just can open the frontend lovelace raw editor in the rop right corner when you are already in lovelace edit mode.

You can use the customizable buttons but will lack some features like the button row without a gap.


It’s hard to identify the problem remotely. I guess you already added the theme from my first post including the background-image parameter. You also uploaded the backgroung image file to the correct location and with the correct name?

Then you need to add the background parameter to every view (every dash under views starts a new view)

title: Home
  - background: var(--background-image)
    badges: []
    icon: 'mdi:home'
    path: default_view
    title: Home
  - background: var(--background-image)
    badges: []

Hope this helps. And hit STRG + F5 after saving.


I added the theme and saved the picture in the correct location.

I tried doing it like this but it gives me an error. However, adding it to the bottom of the view seems to work.


Still the background image doesn’t show. I also tried restarting the server.


Sorry, anyone has some link or how-to for the compact-custom-header?
I did follow the instructions on github repo, but it happens nothing, neither errors.


great theme i love it!
@naofireblade could u please share your Lovelace.yaml?


That’s usually caused by accidentally copy-pasting a newline character or non-breaking space or something at the end of the line before the one indicated.

If you did paste it in, try typing it manually instead.


After days of searching this worked for me except i had to remove the ‘-’ from ‘- background’ so it was just ‘background’

so mine looks like this:
background: center / cover no-repeat url("/local/grey.jpg") fixed

you put it in between ‘title’ and ‘badges’ for individual tabs and in between ‘title’ and ‘views’ for all tabs

put the jpg in ‘www’ folder and obviously what ever you name the jpg file to also change ‘grey.jpg’ in the code above to match

Thank you @Silvrav


naofireblade, I don’t know if you noticed, but custom_compact_header had some interesting new features in the last upgrades, like a custom color for the header :wink: check it out!


Awesome! That fixes the problem with the primary color in my dark theme.


@thomasloven Do you happen to know if there’s been changes to how fonts are picked in the last 2 releases? What was previously working for me as a global font is no longer working globally - card titles and markdown cards are reverting to Roboto with no apparent way to override it any more

EDIT: it appears as if the problems elements are now inheriting from ‘user agent stylesheet’ - I can’t figure out how to override this




We’re those inherited from the paper-styles? I’m actually very unclear on how themes work on the front-end :slight_smile: I’ve never spent time looking into them