How to make cards use the app-header-background-color in dark mode?

Configuration Frontend
1

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

Screenshot 2022-01-18 235658

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
Screenshot 2022-01-18 235732

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.

2

As a temporary solution I have linked --app-header-background-color to --primary-color, this seems to work okay, too bad I can’t apply the darkened app-header-background color to other cards without hardcoding it.

Oh well, it works for now, maybe some day anyone will find an answer to this.

My current solution for anyone that will come across the same problem (I highly doubt it though :joy: )

# my theme
themes:
  test:
    mode:
      dark:
        app-header-background-color: var(--primary-color)
1 Like
3

Well, two years later and this is still a problem. It may be related to caching. I noticed that If I navigated away from my dashboard page and then back again it would use the correct color. But if I reloaded the page it would go back to the wrong color.

4

@AwesomeGuyNamedMatt I stopped using the dark mode in HA, as that is what is causing it.

I made 2 themes a light and a dark one (both running in the light mode). It is a bit more work, but at least it will respect the selected color.

5

You define both modes in the theme

Example:
  modes:
    dark:
      app-header-background-color: var(--primary-color)
      primary-color: lime
    light:
      app-header-background-color: var(--primary-color)
      primary-color: red