Light Switch Icon State

I changed my kitchen light switch icon to a bulb to make it uniform with the rest of the lights in my house. I noticed though that when changing from on to off the toggle switch changes, but the icon stays grey. The lights in the rest of my house are yellow when on and grey when off. Any ideas?

hi, my icon for switch remain grey, does not change color when i flip the switch, anyone knows why please ?

Its because the HA core only changes icon color based on state for the light device class, but not for others like switch or fan and this property is NOT customizable (which sucks…).

I was using the custom_ui add on to do this for years, but it blew up in 0.110.0 release and is no longer supported by the original developer.

There have been requests to do this in the core for years, but it just keeps getting ignored…

I don’t understand, when I added this switch to my system in Feb., the icon color changed. But in the last week I noticed the color doesn’t change now? What changed?

I didn’t do anything with custom UI but now it stopped working???

There’s a state_color attribute on all Lovelace cards. Set it to true and your switch will change color when on. This is also the case for any other on/off devices.

state_color: true

Is there a way to set that on an entity inside an entity card? I only see that option to write code for a button card?

It’s in the entities card, not the entity card. But that would be a great feature request.

@petro I do not see this option on my entities card

Nvrmnd got it working. Thanks

not sure when it started because I am just playing with this now, but State_color: true on a card does nothing for me. Not for switches or lights. However, when the light is on the icon is a shade of white-ish and when you dim it to almost off its a darker color that then the light is at 100%.

when the light is off, the icon color is the same as when the light is on at 100%

not a fan of this change

The change happened 2 years ago and it didn’t effect lights. So your statement about lights is just your observation about how they work in the UI. Only switches and other non-light items were affected by this change. Remove your capital S on state_color: true and all your switch icons will ‘appear on’ in the UI. Lights will behave the same way with or without state_color.

While I disagree with your statement about perception, I can say that it is definitely browser dependent.
Chrome Browser on my laptop - they don’t change color, except for the one Tuya Color Floor lamp… that one does.
Fully Kiosk Browser on a fire tablet - they don’t change color., except for the one Tuya Color Floor lamp…
Default Browser on my IPhone 13 - works great
Home Assistant App on my IPhone 13 - works great

I can assume that my dashboards are fine, but that somehow the browsers are the issue

and just like that, its now working.
I added blank lines to the bottom of customize.yaml and it worked.
Then saved and removed them and it still works

so oh well, its working now

state_color isn’t set in customize.yaml. It’s set on the card your using in the UI.