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

4 Likes
10

I’ve made several attempts, but unfortunately I can’t get it to work.

Does the “card_mod:” also work with the new Drag & Drop dashboard?

I’m trying to set it up so that when my solar panels feed back more than the house consumes the colour of the icon changes to green, at 0 W it’s grey and at consumption higher than 0 W it’s red.

Am I overlooking something or does it not work with Drag & Drop?

If anyone would like to help, thank you very much!

type: tile
entity: sensor.p1_meter_actueel_vermogen
name: Teruglevering
color: amber
card_mod:
  style: |
    .icon {
      {% if states(config.entity)|float(0) < 0 W}
        --icon-color: green;
      {% elif states(config.entity)|float(0) = 0 W}
        --tile-color: grey;
      {% elif states(config.entity)|float(0) > 0 W}  
        --tile-color: red;
      {% else %}  
        --tile-color: amber;
      {% endif %}  
    }
11

The W at the end of your if and elif statements needs to be a % like this:

{% if states(config.entity)|float(0) < 0 %}