Dial Color

[reefland]

The dial background color is always orange because heat mode is enabled. If I disable heat mode the dial background color is black.

I'd like the dial background to reflect the climate sensor's "hvac_action" attribute current value.

• "idle" shows black background.
• "heating" shows orange background.
• "cooling" shows blue background.

Essentially, exactly what happens when you look at a Nest thermostat.

[LongDono]

I was wondering why all 3 of mine were always orange (I also have the Nest thermostats). :)

[fineemb]

Background color is currently using preset_mode this property Icon color is currently using hvac_state this property But my climate doesn't exist preset_mode or hvac_action properties. Can i provide the following screenshots?

[reefland]

Would be helpful if the configuration could let us override the default attribute being used.

Here are screen shots showing idle and heating in the "hvac_action" attribute.

[fineemb]

hvac_action is it always the same as state? cooling(cool), heating(heat).....

[reefland]

No, state for me is always "heat" or "cool" or "off" or "auto" depending on the mode the thermostat is set for. The "hvac_action" reflects what is happening this moment. "idle", "heating", "cooling".

[fineemb]

Thanks, i already understand I will find a way to solve this problem

[mycrouch]

Is there a way to also do a light theme?

[pqpxo]

Hi there!

I would also be interested in how to change the overall colour of the dial. I've tried dabbling with the .js file and found what needs changing but the changes I make never persist

[TimBeekman]

+1 on the light theme

[TimBeekman]

For everyone who wants light mode:

card_mod:
  style: |
    @media (prefers-color-scheme: light) {
      .dial {
        --thermostat-off-fill: #F4F4F4;
      }
      .dial text, .dial text tspan, .dial__lbl--target, .dial__lbl--low, .dial__lbl--high, .dial__lbl--ambient, .dial__lbl--super--ambient, .dial__lbl--super--target, .dial__lbl--super--high, .dial__lbl--super--low, .dial__lbl--ring, .dial__lbl--title {
        fill: black;
      }
      .dial__ticks path, .dial__ticks path.active.large {
        fill: #BDBDBD;
      }
    }