Doesn’t the example fit?
Hi,
I have a small question regarding changing my icon color.
I need to change the color of my icon with 1 sensor.valve.x entity where the status is on or off, and with feedback of a service, where the results can be heating, cooling or off.
Is this possible? If yes, can somebody help me with the syntax? 
thx,
Jurgen
Hi @jukkevp,
I have managed to get the icon and the text color to change on a card based on a value. Not sure if this was exactly what you were after.
Basically if I am exporting electricity everything is green, or red if I am importing electricity.
It might not be the best/easiest way to do it, but it’s a start.
show_name: true
show_icon: true
type: custom:button-card
triggers_update: all
variables:
time: |
[[[
return states["input_datetime.current_exporting_power_last_updated"].state.slice(-8)
]]]
tap_action:
action: none
entity: sensor.smart_meter_power_status
state:
- value: Exporting.. :)
icon: mdi:transmission-tower-import
color: green
styles:
card:
- color: green
- font_size: 16px
name: |
[[[
return "Started Exporting Power @ " + [variables.time] + " :)"
]]]
- value: Importing.. :(
icon: mdi:transmission-tower-export
color: red
styles:
card:
- color: red
- font_size: 16px
name: |
[[[
return "Started Importing Power @ " + [variables.time] + " :("
]]]
hold_action:
action: none
screenshot of exporting.
Graham.
1 Like
I’m trying to get an icon to change colour based on the relative value of several entities and cannot get it to work at all. It just stays one colour…
Last iteration of code was:
type: custom:button-card
show_entity_picture: true
entity: sensor.soc
name: Use Power?
styles:
icon:
- color: |
[[[
var soc = states['sensor.soc'].state;;
var green = states['input_number.test_target_green'].state;
var amber = states['input_number.test_target_amber'].state;
if (soc > green) return 'green';
if (soc > amber) return 'amber';
else return 'red';
]]]
tap_action:
action: none
show_state: false
show_label: false
size: 50%`
I’ve tried for hours… Any help gratefully received.
You have 2 semicolons.
And try
var soc = parseInt(states['sensor.soc']?.state;
Can we not use state_color in templating instead of defining colours manually?
Since end of Dec’23 my icons colors do not changed anymore, based on state and always white. I used this code below and don’t changed for a long time
type: custom:auto-entities
show_empty: false
card:
type: entities
show_header_toggle: false
state_color: true
title: Temperature
filter:
include:
- entity_id: sensor.temp_*_temperature
options:
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity) | int >= 23 and states(config.entity) | int <= 24 %}
#ccff00
{% elif states(config.entity)|float > 25 %}
#fc3735
{% elif states(config.entity)|float < 21 %}
cyan
{% else %} white
{% endif %}
;
}
You probably updated card-mod to at least 3.4.0 w/o reading release notes.
Correct, understood that format have been changed but still can’t figure out. Added card_mod: but nothing changed, will explore.
UPD: Problem solved, extra space was. @Ildar_Gabdullin many thanks!
1 Like
Btw, these changes in card-mod were incorporated 2 years ago in ver 3.0, and so sad that many people have not updated their config so far…
1 Like
Thanks. I did it a different way in the end.