Share your Themes

No unfortunately !important doesn’t work either. I tried, but I think it only works for inline styles (see https://stackoverflow.com/questions/4616964/css-important-not-working) but this is set in the CSS in the code somewhere.

Edits:

I looked a bit further into the files… Seems the culprit is /src/layouts/partial-cards.html in the polymer-master (line 30), where app-header-layout is hardcoded as #E5E5E5. This overrules the file /src/resources/ha-style.html (line 72) where the entry app-header-layout is set to background-color: var(–primary-background-color);. I think that by adding !important there we could have the latter override the former, so that would be background-color: var(--paper-grey-50) !important; (note: also changed it to --paper-grey-50). Alternatively remove the former altogether (and still change the latter to paper-grey-50 :slight_smile: ).

Similarly, the white background in the group badges is hardcoded in /src/components/ha-card.html (line 12) and could be changed to background-color: var(--primary-background-color);.

I could go on… But with those two fixes I think we could create a pretty decent night mode already.

2 Likes