Icon color on specific state

Hi All,

I have a question about the icon color when it has a specific state. When my heating system is heating then the color of the icon is orange, but when the status is idle it is Grey. What I want is that the icon state always is orange when the system is idle of heating. But when the system is off then I need Grey !

Hopefully you guys can help me, in the screenshot you see what I mean.


Thanks a lot

These colours are set by the following theme variables:

  ### Climate devices ###
  state-climate-heat-color: "#FF6262" # red
  state-climate-cool-color: "#039BE5" # blue
  state-climate-fan_only-color: "#0da035" # green
  state-climate-dry-color: "#e0b400" # yellow
  state-climate-auto-color: "ff8100" # orange

See: https://www.home-assistant.io/integrations/frontend/#defining-themes

1 Like

It is the paper-item-icon-color: rgb(255, 129, 0) #ff8100 what does the trick, but in glance this is not the solution. All my icons appear orange now…

Think about using card-mod. Go to the corresponding thread, there are examples for Glance card.

I used custom button-card, thats the best way to achief this. Here is my config

type: custom:button-card
entity: climate.woonkamer
icon: mdi:thermostat
color_type: icon
size: 18%
name: woonkamer
action: more_info
label: |
[[[
var bri = states[‘climate.woonkamer’].attributes.temperature;
return ’ ’ + (bri ? bri : ‘0’) + ’ °C’;
]]]
show_label: true
show_state: true
styles:
label:
- font-size: 15px
- padding: 2%
name:
- font-size: 15px
- padding: 2%
state:
- font-size: 15px
- padding: 3%
state:

  • value: ‘off’
    color: rgba(169, 177, 188, 255)
  • value: heat
    color: rgb(255, 129, 0)
  • value: idle
    color: rgb(255, 129, 0)
1 Like