How to change the icon color in an entities list?

Configuration Frontend
1

Hi,

Since two days I’m trying to find out, how I can change the color of an icon based on its state, but all information that I did find didn’t help me to write the right code.

I want to have a list of entities like this (doors and windows with contact sensors), but the icons shall be red when open and green when closed:

image
image1169×457 44 KB

All information that I did gather resulted in the following code:

type: entities
entities:
  - entity: binary_sensor.garagentor_contact
    type: simple-entity
    name: Garage
    show_state: false
    icon: mdi:garage
    card_mod:
      style: |
        ha-state-icon{
        {% if is_state(config.entity,'open') %}
         --state-binary_sensor-contact-open-color: red
                }
        {%else%}
         --state-binary_sensor-contact-closed-color:green
        {%endif%}
             }

But with that the color doesn’t change.

Does anybody know, how to fix that?

Regards, Jogi

2

I use a picture element card to change the icon color when in this example my gun safe door is open. Green Icon = Door Closed, Red = Door Open.

Maybe you can use this yaml as a base to do what you want? :slight_smile:

type: picture-elements
image: /local/1x1.png
aspect_ratio: 50%
elements:
  - type: state-label
    entity: binary_sensor.gun_safe_sensor_door
    prefix: 'Gun Safe - '
    style:
      left: 50%
      top: 80%
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
  - type: state-icon
    entity: binary_sensor.gun_safe_sensor_door
    icon: mdi:pistol
    name: null
    style:
      left: 46%
      top: 7%
      '--state-binary_sensor-active-color': red
      '--state-binary_sensor-inactive-color': green
      transform: scale(2.0)
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
3

Thank you, but I think that’s not what I need.

But I see that you were working with the state-binary_sensor as well. Did it work? I‘m not familiar with defining these variables (?); do you think, mine (state-binary_sensor-contact-open-color) is correct?

4

Main card-mod thread - 1st post - link at the bottom - Entities card

5

Your breadcrumbs lead me to this:

https://www.home-assistant.io/dashboards/entities/#special-row-elements

Is it that what you mean?

6

Of course no. The path I proposed contains styles for Entities card.

7

you can check the HA logic for the state-colors here Home Assistant frontend - Home Assistant

and that translates to this

    state-binary_sensor-door-off-color: var(--ok-color)
    state-binary_sensor-door-on-color: var(--alert-color)

for device_class door. the same would be used for your device_class, just need to check or set the class and add it to this schema

8

Now I‘ve found it (Styling cover entity row), thank you!

This is now my working code (in the meantime I‘ve also found out that the status of my contact sensor isn‘t open and closed but on and off):

type: entities
entities:
  - entity: binary_sensor.garagentor_contact
    name: Garage
    card_mod:
      style: |
        :host {
        {% if is_state(config.entity,'on') %}
          --paper-item-icon-color: red;
            }
        {%else%}
          --paper-item-icon-color: green
        {%endif%}
             }
9

hehe, you get the answer to your search by Ildar in the post above, and now you make your own post as solution… it is customary in this Community to credit the post that brought you to your answer and mark that as solution.

besides that, you dont need card_mod at all, if you use the correct device_class, are they set on you binary_sensors contact entities?

you can see what HA does for those classes by default

and change that in the themes, like I mentioned above

10

Thank you, that helps a lot to increase my knowledge!

11

Sorry for the solution mark! I did assume that this should help another user to find the complete solution quick!

And thanks for pointing out the device_class - that’s another learning step!

1 Like
12

The link I provided contains a description of using theme variables as well - and it was described which particular method should be used in a particular case (change by card-mod for a card / separate element, change in a theme).

13

for reference one again the link to that extensive post:

Styling entities card

1 Like
14

This post contains general styles for Entities card. Actually, I meant a different post about using css variables (which in some cases may be used without card-mod as it was already noted by Marius).