Hi, after struggling all night to get this worked out, I found myself coming here to ask you guys.
I am working on creating a new dashboard, but I struggle with the dark mode (default HA theme).
Whenever I set theme colors via the profile editor it works like a charm when using the light mode. However when using the dark mode, there is no way to color the buttons like the app-header-background-color.
I added the following to my code and this works absolutely fine when on light mode:
- type: entities
style: |
ha-card {
--ha-card-background: var(--app-header-background-color) !important;
entities:
- etc etc etc
In the screenshot above I chose green as the primary color, it works like a charm here.
But this is what happens if I turn on dark mode, I chose purple/pink as my primary color here
It seems that cards are always greenish with any of the colors I have tried.
The card does not respect the app-header-background-color and just takes the default color. When inspecting the css code I find that it shows the correct color when inspecting the toolbar, but will show the default color when inspecting the card (they both have the same css name --app-header-background-color). What is even weirder is that the --app-header-text-color value DOES work.
Is there perhaps anyone that can help me with this as I want to use the default theme in HA?
I want the cards to have the same color as the app-header when viewed in darkmode without editing the theme file (so preferably editing the css on the card itself). I prefer evading hardcoding in this theme since well, I think the home assistant color selector is pretty neat.
1 post - 1 participant