Detect dark mode

[jake404]

Describe the solution you'd like I have buttons where I show the wind speed and set the background color based on severity. I'm using grayscale starting from white and going up to black and it looks great in light mode. But, once I change to dark mode in HA, the button background looks inverted. It would be great to be able to use dark mode as a condition when setting certain options such as state colors. It would then be possible to have it start out at black and go up to white when in dark mode.

Light mode:

Dark mode:

[basbruss]

@jake404 You can check in a condition whether hass.themes.darkMode is true to define if your dashboard is shown in darkmode

[jake404]

Before trying to use hass.themes.darkMode I setup a JavaScript template as a condition to set the color to make sure I was setting the condition in the correct place, but it doesn't work. Here's what I tried with:

      - type: custom:button-card
        entity: sensor.tempest_st_00045370_wind_speed
        color_type: card
        color: >
          [[[
            if (entity.state < 60) return 'lime';
            if (entity.state >= 60 && entity.state < 80) return 'orange';
            else return 'red';
          ]]]

      - type: custom:button-card
        entity: sensor.tempest_st_00045370_wind_speed
        color_type: card
        state:
          - value: 0
            operator: =>
            color: >
              [[[
                if (entity.state < 60) return 'lime';
                if (entity.state >= 60 && entity.state < 80) return 'orange';
                else return 'red';
              ]]]

If I set the color to a fixed color without the JavaScript Template it works fine in both of the above examples, it's when using the JavaScript template it doesn't work.