Detecting Dark Mode

[fusionstream]

trafficstars

Would be cool to be able to detect dark mode. That way one can have separate color palettes for light and dark mode

[ildar170975]

...or you can define different variables in your themes instantly:

my_theme:

  modes:
    light:
      user-bar-card-fill-color: red
      ...

    dark:
      user-bar-card-fill-color: green
      ...

[fusionstream]

Sorry should have been clearer. Am not using themes. Stock light and dark mode.

[berrywhite96]

Did you try the new CSS media selectors? https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/

[ildar170975]

Did you try the new CSS media selectors?

Success!

type: entities
entities:
  - entity: sun.sun
    name: cyan if DARK
    card_mod:
      style:
        hui-generic-entity-row $: |
          @media (prefers-color-scheme: dark) {
            state-badge {color: cyan;}
          }
          @media (prefers-color-scheme: light) {
            state-badge {color: red;}
          }

Described here: https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/3017