Icon Color change on entity state value card mod

Configuration Frontend
1

Been searching through multiple posts and have tried a lot of different variations to no avail. I am trying to change an icon color based on the numeric value of the entity state. Here is what I have but the color does not change beyond the initial value. I understand there is an issue with the argument but I can’t seem to sort it out.

entity: sensor.living_room_air_purifier_pm2_5
            card_mod:
              style: |
                ha-card {
                  {% if states('sensor.living_room_air_purifier_pm2_5') >'0' %}
                    --card-mod-icon-color: #3399ff;
                  {% elif states('sensor.living_room_air_purifier_pm2_5') >'35' %}
                    --card-mod-icon-color: #00e6ac;
                  {% elif states('sensor.living_room_air_purifier_pm2_5') >'75' %}
                    --card-mod-icon-color: #ffcc00;
                  {% elif states('sensor.living_room_air_purifier_pm2_5') >'115' %}
                  --card-mod-icon-color: #ff4d4d;
                  {% endif %}
                }
2

try this…

entity: sensor.living_room_air_purifier_pm2_5
            card_mod:
              style: |
                ha-card {
                  {% if  states('sensor.living_room_air_purifier_pm2_5') | int > 115 %}
                  --card-mod-icon-color: #ff4d4d;
                  {% elif states('sensor.living_room_air_purifier_pm2_5') | int > 75 %}
                    --card-mod-icon-color: #ffcc00;
                  {% elif states('sensor.living_room_air_purifier_pm2_5') | int > 35 %}
                    --card-mod-icon-color: #00e6ac;
                  {% elif states('sensor.living_room_air_purifier_pm2_5') | int > 0 %}
                    --card-mod-icon-color: #3399ff;
                  {% endif %}
                }

in my testing of this, i’m seeing two issues. one is the logic (which i’d edited above). the second is the display refresh. the ui is sometimes updating the color and sometimes i have to hit refresh on the page to get it updated. but clearly it’s trying t update it… but in editor mode, it’s updating right away…

1 Like
3

Lol…Came back to post the solution with a face palm that I had the order of operations reversed…

This is the solution

try this…

entity: sensor.living_room_air_purifier_pm2_5
card_mod:
style: |
ha-card {
{% if states(‘sensor.living_room_air_purifier_pm2_5’) >‘115’ %}
–card-mod-icon-color: #ff4d4d;
{% elif states(‘sensor.living_room_air_purifier_pm2_5’) >‘75’ %}
–card-mod-icon-color: #ffcc00;
{% elif states(‘sensor.living_room_air_purifier_pm2_5’) >‘35’ %}
–card-mod-icon-color: #00e6ac;
{% elif states(‘sensor.living_room_air_purifier_pm2_5’) >‘0’ %}
–card-mod-icon-color: #3399ff;
{% endif %}
}
in my testing of this, i’m seeing two issues. one is the logic (which i’d edited above). the second is the display refresh. the ui is sometimes updating the color and sometimes i have to hit refresh on the page to get it updated. but clearly it’s trying t update it… but in editor mode, it’s updating right away…

4
  1. It is unclear what card is used. A particular style depends on a card. Besides, these “—card-mod-xxx” variables may not work in some cases. Suggest to ask similar questions in a dedicated main card-mod thread.
  2. There is an error in a template, should be like
states('sensor.living_room_air_purifier_pm2_5')|float(default=0) > 115
5

oh, i also put a | int after each states() and used numbers just to force it to a number… that’s how i did my testing of it…

i edited mine above to more directly match what i actually did for my testing (vs originally i just reordered your post)

1 Like
6

OP is comparing two strings(((

1 Like
7

Also, do not forget defining a default value in case a sensor is unavailable

1 Like