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}'
       }}
3 Likes
4

Good day to everyone, sorry but i not abe to fully understand how to apply what you say to my case.
My case:
I would change color according to range of consumption of my devices.
here is the actual tile for example:

type: tile
color: deep-orange
features_position: bottom
vertical: false
entity: sensor.em_1_prese_forza_channel_1_power
name: Q-PRESE

image
image794×249 11 KB

i would let it green until is higher than 200w, blue until 1000w, orange until 2000w and red above 2000.

Tnx

5

Using this is not needed here since card-mod supports jinja.

You need to use card-mod.
Examples are here: main card-mod thread - 1st post - fantastic link at the bottom - tile card

1 Like
6

Tnx i found the main card-mod thread, but i dont find any similar case… (probably i cannot understand) can you please point me an example or devlop my own example?

7

Please ask all card-mod related questions there.
The path to a list of styles for Tile card was provided above.