search

thomasloven / lovelace-card-mod

🔹 Add CSS styles to (almost) any lovelace card
MIT License
1.12k stars 167 forks source link

Detecting Dark Mode #181

Closed fusionstream closed 1 year ago

fusionstream commented 2 years ago

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

ildar170975 commented 2 years ago

...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 commented 2 years ago

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

berrywhite96 commented 2 years ago

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

ildar170975 commented 2 years ago

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