Icon colors in lovelace for climate entity

Configuration Frontend
,
1

Hi there, I want to change the color in the overview depending if the TRVs are Heating, Idle or off.

Currently I have this configured, but it doesn’t differenciate between idle and off

         - type: state-icon
            entity: climate.it_thermostat
            style:
              top: 85.2%
              left: 9.7%
              "--state-climate-off-color": blue
              "--state-climate-idle-color": green
              "--state-climate-heat-color": red

Do you have suggestions or solutions how to solve this?

2

You probably meant a Picture elements card.
Here is an example for Demo ecobee:

type: picture-elements
elements:
  - type: state-icon
    entity: climate.ecobee
    style:
      top: 10%
      left: 50%
      "--state-climate-off-color": blue
      "--state-climate-idle-color": green
      "--state-climate-heat_cool-color": red
image: https://demo.home-assistant.io/stub_config/floorplan.png

(heat_cool - because this is one of possible modes of the device)

Please next time post a code accorgingly to forum rules, currently it is unformatted & cannot be analysed.

3

Sorry, I forgot the code element.

Oh yeah, right. Picture elements.

I did exactly what you posted. It’s the same.

But there is no difference between idle and off. In both states the icon remains blue (in my example).
If I change the “off” value to another color, the idle and off color change the accordingly

heat (red) works though

image
image336×442 38.1 KB

4

Open your climate entity in Dev tools → State & see what modes does it support.
Make sure that it can be “idle”.

5 
hvac_modes:
  - "off"
  - auto
  - heat
min_temp: 4
max_temp: 35
target_temp_step: 0.5
current_temperature: 22.9
temperature: 22
hvac_action: idle
friendly_name: Service Thermostat
supported_features: 385

it has a hvac action “idle”

So I guess it is not possible?

It is a Sonoff TRVZB

6

I honestly do not know a meaning of this property.
Can you make a physical device to be “idle”? Does the entity have the “idle” state then?

7

the HVAC mode can be Auto, Heat, or off.
But the State is shown in the middle as “idle” when it doesn’t heat right now but isn’t off either

image
image569×724 28.9 KB

when heating it looks like this:
image
image455×433 40 KB

8

I see. not having myself HVAC, so asking.
And what is a state of this “climate” entity when the label is “idle”? Check in Dev tools.

9

This is IDLE

hvac_modes:
  - "off"
  - auto
  - heat
min_temp: 4
max_temp: 35
target_temp_step: 0.5
current_temperature: 23.4
temperature: 22
hvac_action: idle
friendly_name: "Vertrieb/IT Thermostat "
supported_features: 385

This is heating

hvac_modes:
  - "off"
  - auto
  - heat
min_temp: 4
max_temp: 35
target_temp_step: 0.5
current_temperature: 23.3
temperature: 24
hvac_action: heating
friendly_name: "Vertrieb/IT Thermostat "
supported_features: 385

This is off

hvac_modes:
  - "off"
  - auto
  - heat
min_temp: 4
max_temp: 35
target_temp_step: 0.5
current_temperature: 23.4
temperature: 7
hvac_action: idle
friendly_name: "Vertrieb/IT Thermostat "
supported_features: 385
10

You are showing attributes, but what a state is?
CSS theme color variables are used dependently on a state.

11

Well, this is what it shows or am I looking at the wrong place?

image
image1213×904 40.2 KB

12

Exactly what is needed.
Means - when the entity has “hvac_action: idle”, it’s state is “off”.
That is why you have same color.
But don’t worry, if you need to differentiate the “idle” mode in this card - it can be done by card-mod. A custom solution is needed, not out-of-box.

To style a color of an icon in Picture elements card, check this way:
google “picture elements small tutorial” → 1st post → style elements conditionally
Come back if you get any troubles.

13

Cool thanks! I’ll try that :slight_smile:

1 Like
14

Note that you need to change a color ONLY when the attribute “hvac_action = idle”, otherwise default “out-of-box” color should be applied.

1 Like