How to handle dark mode?

[robchandhok]

Love this utility!

I did run into an issue where I made the buttons a light gray background, and then had a terrible result when my tablet went into dark mode at night....so I went on a chase to find out how to test for it, and never figured it out. I think it's my limited CSS knowledge - I didn't know how to set the button background color...

I used the example, and so the hover was successfully set to red, but the second bit did nothing.

In the end, I just removed the background color and let it inherit from the theme, but I'd still like to understand if/how to use the @media key.

Thanks!

entities:
  - type: custom:paper-buttons-row
    extra_styles: |
      paper-button:hover {
        background-color: red;
      }
      @media (prefers-color-scheme: dark) {
        paper-button {
          background-color: yellow;
        } 
      }
    base_config:
      preset: mushroom
      icon: false
      styles:
        button:
          width: 75px
          border-radius: 5px
          font-weight: bold
          font-size: 12pt
    buttons:
...

[shpongledsummer]

Late reply, but maybe this helps: My Paper Button Row cards (and all other cards) automatically adapt their colors to dark/light mode by switching themes based on sunset/sunrise using a simple automation.

I maintain two theme files (light and dark) with all the color variables (card backgrounds, text colors, etc.), and the cards just reference those variables.