search

fineemb / lovelace-thermostat-card

Thermostat Lovelace card
Other
109 stars 27 forks source link

Dial Color #11

Open reefland opened 4 years ago

reefland commented 4 years ago

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.

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

LongDono commented 4 years ago

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

fineemb commented 4 years ago

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? 01

reefland commented 4 years ago

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. ha_climate_attributes_heating

ha_climate_attributes_idle

fineemb commented 4 years ago

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

reefland commented 4 years ago

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 commented 4 years ago

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

mycrouch commented 3 years ago

Is there a way to also do a light theme?

climate

pqpxo commented 3 years ago

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 commented 1 week ago

+1 on the light theme

TimBeekman commented 1 week ago

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;
      }
    }