Entity Card Customization

Configuration Frontend
1

Want to change the color of icons on an entity card base on their state. I installed the Card-Mod on my HA OS instance. I wen to the card and expose the yaml code and added a section at the end like so,

Picture1
Picture1792×661 52.1 KB

Just don’t see any changes or know what else I need to do to make the color change happen.

2

Try “style” without capital “S” :slight_smile:

card_mod:
  style: |
    :host {
      --card-mod-icon-color: green;
    }

image
image715×242 12 KB

3

Thank you for the reply. That was my mistake. I do have another question, what I really want to do is for the icons to change color base on their Off or On condition. This added code forces them to be green all the time regardless of their state. Sorry, I’m new and trying to learn.

4

Then you will need to override the CSS variable --paper-item-icon-active-color

card_mod:
  style: |
    :host {
      --paper-item-icon-active-color: green;
    }

And if you want to override the inactive color : --paper-item-icon-color

BUT ! If you want it for all you cards you should probably think to make this with a theme and not with card_mod for all your cards :slight_smile:

PS : don’t be sorry, learning curve can be hard with HA :smiley: