Changing Icon Color based on state in picture-elements?

Configuration Frontend
1

Uh…so, I’m lost on this one.

I’m trying to overlay an icon on my picture-elements setup and I want to customize the on and off colors. Right now, the entity and icon is a light/light bulb, and the resulting icon is either blue when off, or some shade of yellow when on, depending on brightness.

I just want to be able to control the color.

- type state-icon
  entity: light.workshop
  style:
    top: 20%
    left: 20%

Now, how do I change the color of this icon based upon the state of the entity?

2

You can do that in either your Theme(Global), or with custom: card-mod ( most common way)

3

That’s great. Can you give an example?

4
  • type: state-icon
    Im Not sure, but maybe i got this 1 from the picture-elements-card Doc. :wink:

And this is my Theme set:
paper-item-icon-color: ‘#A0A2A8’
paper-item-icon-active-color: ‘#87BF50’

Or as mention with CSS Style: or card-mod applied to the entity

No offense, but im tired of acting search-engine for various examples, if you have problems with any examples you find , feel free to ask.

By just adding “- type: state-icon” it should change color ( using your global colors, in your Theme )

OP, just seems to have forgot the : (semicolon) , so i think he have already solved it

5

card-mod thread → 1st post → link at the bottom → styling picture-elements

6

Some people just do not have a habit to express their reaction at getting advices from other people.