Tile card: change icon color by status

Configuration
1

Hi Friends. In my dashboard i have a mqtt sensor (numeric) that i show in a tile card. I would like to change the color of the icon according to the state of sensor (for example 0-50 green, 50-100 Yellow, over 100 Red).
Is It possibile?
Thanks

2

maybe you can acheive something with card mod… but probably - it will break at some point with an update ^^

3

The documentation seems to suggest that the color is picked by state, domain and device_class but this doesn’t appear to be working. I have a bunch of motion sensors in tiles. After the update today all of the icons turned yellow (meaning active). I would rather have had them be blue or gray or not colored or whatever they were before. I have a feeling this is a bug or its plumbing for a feature like the entities card where they do change based on state.

4

A fix has been made for that. It will be in the next release, and it is unrelated to this topic.

5

So at the moment Is It no possibile?

6

Sure it’s possible with card mod. See: Icon color on themes (open window) - #7 by tom_l

I think I actually meant to post that here.

1 Like
7

I use the custom button card (from HACS) for that:

type: custom:button-card
name: Waschmaschine
entity: sensor.washing_machine_status
icon: mdi:washing-machine
state:
  - value: arbeitet
    color: rgb(255, 0, 0)
  - value: fertig
    color: rgb(50, 205, 50)
8

Thanks! This Is what i Need!

1 Like
9

Nevermind.

this works:

type: tile
entity: sensor.kinderzimmer_atmospharensensor_2
name: Temperatur
tap_action:
  action: navigate
  navigation_path: /lovelace/kinderzimmer
card_mod:
  style: |
    .icon {
     {% if states(config.entity)|float(0) > 30 %}
      --tile-color: red;
     {% elif states(config.entity)|float(0) > 28 %}
      --tile-color: orange;
     {% elif states(config.entity)|float(0) > 20 %}
      --tile-color: green;
     {% elif states(config.entity)|float(0) > 15 %}  
      --tile-color: blue;
     {% else %}  
      --tile-color: lightblue;
     {% endif %}  
    }

Thanks

3 Likes