Change color of icon based on state of a different entity

Configuration Frontend
1

I’m relatively new to HA and still learning as I build out my system. I know that it is possible to change the icon color based on the state of an entity, but I am trying to figure out how to change the color based on the state of a different entity.

To put this in perspective, I have an ecobee thermostat with multiple smart sensors that report temperature and occupancy to determine which rooms should have the temperature prioritized (only worry about the temperature in the occupied rooms). I have these values displayed on a glance card on my dashboard, but I would prefer if the icon would change color based on if that sensor is reporting the respective room is occupied or not.

Any help on this would be appreciated!

image

2

You can either use card_mod and templates to use the state of another entity to adjust the color of your glance card entities, or use a different card entirely that allows you to directly use a template to define the color, like custom button card. There may be other options, but the main point is that you’ll need to use a template to define the color, and most native cards don’t support them.

1 Like
3

Update for anybody else who may be researching this. As stated above, there are multiple ways to do this, but here is what worked for me:

type: custom:config-template-card
 variables:
   ROOM_STATE: states['binary_sensor.living_room_occupancy'].state
 entities:
   - sensor.living_room_temperature
 card:
   type: glance
   entities:
     - entity: sensor.living_room_temperature
       name: Living
   card_mod:
     style: |-
       ${ if (ROOM_STATE === 'on') {
         'ha-card {--card-mod-icon-color: yellow;}'
       } else {
        'ha-card {--card-mod-icon-color}'
       }}
2 Likes