Home Assistant Community

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 Hass.io 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 Hass.io?

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

1 Like

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!

1 Like

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


This is my latest implementation of the clear theme. Lots of custom cards, but optimized for an iPad on the wall (with big touch buttons).


Nice graphics, are they from a public domain set?
(The ones in the middle of the cards)


Most of them are from vectorstock (very cheap): https://www.vectorstock.com/royalty-free-vector/3d-of-isometric-flat-icons-for-vector-14072015
I adjusted them for my needs in Illustrator. F.e. for the alarm, I created a red (away), green (home, exists in the file) and black (night).
Also, if there’s a light on, the light icon in the middle turns yellow (also custom created). Also, if the port is open, it has a closed lock, otherwise an open lock, etc etc.

1 Like

Btw nice wide angle cam - bottom one. Whats is it please?