Change Sensor Icon (Color) dynamically

Configuration
,
1

I would like to change the color of my icons, or even the entire icon based on the state of a sensor.
I know it must be possible, as the standard ‘sun.sun’ sensor shows a yellow sun when the sun is above the horizon, but a dark sun when it is below the horizon.
How would I implement such things for other sensors?
Example: I have my estimated traffic time frpm my work to home in minutes on my home assistant dashboard. I would like the icon to turn orange, or red depending on the amount of mintutes it takes to get home.

Can someone please help? :slight_smile:

6 Likes
2

I would also love to see this.
To be able to change the colors of icons depending on certain states would be great for at a glance previews…

For example:
Presence:-
Grey - Away from home
Green or blue - Home

Status-
Green or blue - Low usage (for CPU, etc)
Red - High usage (for CPU, etc)

As well as certain shades for temperature sensors.

5 Likes
3

Bump - Any thoughts on this. I can change icon (i.e. change to a warning icon when offline or error state) using an icon template but not the colour.

4

I too am curious about this. I have used icon_template in a few sensors and it works great - but can it be used more broadly?

ie. can I change the icon of a input_slider based on the value?

1 Like
5

Love this idea as well. As others have mentioned, would love to have the ability to change the outline color of a sensor based on traffic delays, temperature, cup utilization, etc.

6

The light icon color changes based on the RGB color of the light.
So value based icon color is possible.
It looks like it is pulling the value directly from the selected color set in the attributes.

Style Attribute {
display: inline;
color: rgb(205, 72, 0);
}

Something such as this as a customization would be great.

Ping

customize_glob:
  "sensor.ping":
    icon-color:
     attribute: ping
     high:
       value_over: 100 
       color: red
     medium:
       value_over: 50 
       value_under: 100
       color: yellow    
     low:
       value_over: 0 
       value_under: 50
       color: green

Presence

customize_glob:
 "device_tracker.*":
    icon-color:
    state: home
       color: green
    state: away
       color: red

Badges are set up like this:
https://github.com/home-assistant/home-assistant-polymer/blob/master/src/components/entity/ha-state-label-badge.html

2 Likes
7

I actually found this thread looking to do something similar. I have Hue lights and the light icon turns yellow when the light is on. I want my input_slider to turn yellow when the light does. http://i.imgur.com/tXboHZV.png I want Molly’s slider icon in that pic to be yellow because her light is on. Purely cosmetic but I’d really like it.

8

Is this still not possible?

9

any news about this topic?

10

+1 for this. I have a bunch of remote temperature displays that report via MQTT and I’d like to change the sensor label text to another color if the battery level drops (which is part of the MQTT message).

2 Likes
11

it’s possible just to change the icon to reference the battery level.

After messing with themes I kinda think that changing color values aren’t possible just yet.

12

+1. i have some lamps with color shades, so, when the light is on, i think it’d be fun to have the icon to represent the color of the shade instead of just being yellow.

1 Like
13

+1 I’d like this as well. I’m changing the icon when front door is open, but to be able to set the color of the icon would be great.

14

I’d also like this, especially if the color can depend on a different entity. I’d like the icon of my room temperature sensor to turn red when the flame of the heater is on.

15

Solved!

16

Here’s what I wound up with after reading @PianSom’s thread the other day.

customize.yaml

sensor.vision_zp3111_multisensor_4in1_burglar:
  friendly_name: MB Motion
  templates:
    _stateDisplay: if (state === '8') return 'Detected'; else return 'None';
    icon: if (state === '8') return 'mdi:run-fast'; else return 'mdi:walk';
    rgb_color: if (state === '8') return [253, 216, 53]; else return [68, 115, 158];

Edit: This does throw up an Invalid Config card for customizer in the front end, but still works.

5 Likes
17

Any updates? I’m still looking as this was the first thread I came across that seems to be what I want.

18