Several sensors in a glance card return numeric values > 0 when active. I’ve been all over this, but can’t seem to get the icon color to change to an active state when the sensor is not zero.
I’m not trying to change the actual icon like I’ve seen in other posts, but trying to just set the icon state as active. I’d prefer to let the color to be dictated by the theme, but I’m willing to try anything at this point.
Can anyone give me a nudge in the right direction?
-DBB1
Something like this in the card definition:
styles:
icon:
- color: |
[[[
if (entity.state == 'on') return 'white';
else return 'yellow';
]]]
Thanks for the reply, Russell. I’ll play with this some more, but so far have not been able to get this to work.
The sensor icon I’m trying to get to change to an active state is normally zero but reflects a variable rpm value when running. I also have the option to use another sensor for the pump that reflects it on/off state.
The pseudo expression of ‘if rpm > 0 set icon status to on’ seemed simple enough but the actual solution doesn’t seem to be that simple.
I’m not sure if “rpm” is an attribute, but if it is, something like this should work:
styles:
icon:
- color: |
[[[
if (states[YOURENTITYNAMEHERE].attributes['rpm']=0) return 'white';
else return 'yellow';
]]]
I couldn’t get this to work directly in a glance card. I ended up wrapping a template card around it to look at the pump’s on/off status and change the icon color of the targeted sensor accordingly.
The downside of all of this is that I will have to match the icon color manually to any theme I choose, rather than to allow the default icon behavior address it:
- type: custom:config-template-card
variables:
PUMP_STATE: states['switch.pool'].state
entities:
- sensor.pump1_rpm
card:
type: glance
entities:
- entity: sensor.pump1_rpm
icon: mdi:speedometer
name: RPM
title: Pump Status
card_mod:
style: |-
${ if (PUMP_STATE === 'on') {
'ha-card {--card-mod-icon-color: gold;}'
} else {
'ha-card {--card-mod-icon-color}'
}}
No need to use config-template-card, use templates of card-mod itself.
hi,
i tried to use this solution in a glance card, but without succes… no icon color…
When i leave out the if then else it works
Any help would be appreciated
- type: glance
variables:
X_STATE: states['light.ac_0e672c2_9'].state
show_name: true
show_icon: true
show_state: true
entities:
- entity: sensor.zigbee3_power
name: Droger
hold_action:
action: call-service
service: switch.toggle
target:
entity_id: switch.zigbee3
state_color: true
card_mod:
style: |-
${ if (X_STATE === 'on') {
'ha-card {
--card-mod-icon-color: gold;
height: 120px !important;}'
} else {
'ha-card {
--card-mod-icon-color: gold;
height: 120px !important;}'
}}
without the if then else the icon changes to a color
card_mod:
style: |
ha-card {
--card-mod-icon-color: gold;
height: 120px !important;
}
This should work for you…
type: glance
show_name: true
show_icon: true
show_state: true
entities:
- entity: sensor.zigbee3_power
name: Droger
hold_action:
action: call-service
service: switch.toggle
target:
entity_id: switch.zigbee3
card_mod:
style: |
:host {
--card-mod-icon-color: {{ (states('light.ac_0e672c2_9') == 'on') | iif('red', 'grey') }};
height: 120px !important;
}
thanks, gonna try it!
This problem has crept back up since my original post a couple of years ago. My icons would change color based on the status of the pool pump, then recently, I noticed that they weren’t. An update must have broken something. The previously working code:
type: custom:config-template-card
variables:
PUMP_STATE: states['switch.pool'].state
entities:
- sensor.pump1_watts
- sensor.pump1_rpm
- sensor.pump1_gpm
- sensor.pump1_filterstatus
- sensor.pump1_errorstatus
card:
type: glance
entities:
- entity: sensor.pump1_watts
icon: mdi:meter-electric
name: Watts
- entity: sensor.pump1_rpm
icon: mdi:speedometer
name: RPM
- entity: sensor.pump1_gpm
icon: mdi:pump
name: GPM
- entity: sensor.pump1_filterstatus
icon: mdi:air-filter
name: Filter
- entity: sensor.pump1_errorstatus
icon: mdi:list-status
name: Errors
title: Pump Status
card_mod:
style: |-
${ if (PUMP_STATE === 'on') {
'ha-card {--card-mod-icon-color: gold;}'
} else {
'ha-card {--card-mod-icon-color}'
}}
Any ideas how to fix this? Even removing the if statement and attempting to just set the icon color has no effect.
I tested your code with my devices and it’s still working.
So you set it to show green?
It’s really odd. I have this card in a grid column along with other cards, but the icons are only showing the default color, regardless of what I do.
I’ve even posted that code to a stand-alone card on a test page, but cannot get the icons to produce the color I’ve selected.
Yes, I set the colors different just to test it. What card-mod version are you using?
Looks like I’m using v3.5.0.
I have been using card-mod as a Lovelace module, and not a front-end module. Maybe adding it as a frontend: module will make a difference.
seems you don’t need the config-template-card at all for this?
why not simply set the card_mod on the entities directly
c-t-c is a resource hog and should only be used if you need to change the actual config of the card, not for some of these simple modifications on entities
if you set the same modification on several entities, just use an anchor to c&p those. or an include like this
type: glance
columns: 5
entities:
- entity: sensor.hubs_samenvatting
name: Hubs
card_mod: !include /config/dashboard/card_mods/alert_color.yaml
- entity: sensor.kritieke_schakelaars_samenvatting
name: Kritiek
card_mod: !include /config/dashboard/card_mods/alert_color.yaml
and the include is like this:
# alert_icon_color:
style: |
:host {
--card-mod-icon-color:
{% set alert = states(config.entity)|int(-5) %}
var(--{{'alert' if alert > 0 else 'ok'}}-color);
}
which I your case would contain the switch.pool entity in step of the config.entity
(o and btw, this works just fine in card_mod 3.5.0 which I am still using 
)
There are known issues with card_mod 3.5.0, correct?
sure.
most of all with cards inside auto_entities.
(I am only using it because I ‘needed’ the new features of 3.5.0 and managed to fix all other required changes in the last 2 weeks… by no means should 3.5.0 be used in the broader community, that’s why it was retracted. Hopefully a version 4 will see the light of day soon)
Thanks…I am a bit behind on all the changes, but dealt with several issues with folks this evening that were fixed by reverting to 3.4.4. Props to you for putting in the Dev effort!