Entity Icon color & custom icon color based on state (customise icon_color)

Feature Requests
22

I got this working on most of my entities, using the following code in customize.yaml:

sensor.washer_status:
  icon: mdi:washing-machine
  templates:
    hs_color: >
      if (state === 'Running') return [48,76,251];

This makes my washing machine icon yellow if it’s running and the default if it’s not.

However the icons on my light entities from the Philips Hue integration are automatically dimmed according to the dim % of the bulb. I would like the brightness on these to be at 100% as long as the bulb is turned on, regardless of dim %.

I tried the following code without any success. It seems that the Hue config itself is overriding my customization?

light.kitchen_ceiling:
  icon: mdi:ceiling-lamp
  templates:
    hs_color: >
      if (state === 'on') return [48,76,251];

The state shows as on in the states page when the bulb is on.

23

我尝试用以下的代码来改变空调开启关闭时候的颜色，也没有成功

climate.zhu_wo:
  icon: mdi:quadcopter
  templates:
    hs_color: >
      if (state === 'cool') return [48,76,251];
24

Using customizer_ui is great and all… …but shouldn’t something as basic as changing the icon color or entity text color etc based on state be built in into Home assistant?

I don’t want to install customizer that sometimes hangs my HA, just to have some unique icon colors here and there. I like how you can configure it in customize_global file if you have customizer_ui, if that can be built in that would be amazing :slight_smile:

7 Likes
25

This would be great to have.

I am running home assistant in docker-compose and installing external scripts is always a bit of a hassle. Especially when updating containers.

26

+1
Would also be a great addition to the input_select template entity.
I think this would make interfaces less cluttered and much easier to read.

27

Well looks like we got “state_color” in latest reslease. …but you can’t apply it globally or overide the color. Would be great if it can be added to customize_glob.yaml and overide color variable. So “true” can be default color but you can also add a hex/rgb value for different color

28

You can set the color in the theme or maybe use card-mod

29

you still can do that using custom-ui…?

30

yeah custom ui still works

31

For how long? Doesn’t it rely on the states UI?

32

From what I can tell it doesn’t. It just some js that replaces color so it should continue working when states UI is removed. It is rather buggy though so would be great if we didn’t have to use it

33

I’m a little bit confused at the moment…
Is there a way with V107+ to set an icon color in an entity card individualy, depending on it’s state (e.g. a switch/sensor becomes green when active/above a value, another switch/sensor becomes yellow when active/above a value)

34

You can use:
https://github.com/thomasloven/lovelace-card-mod.

image
image980×386 36.7 KB

Here is the state logic:

    - entity_id: sensor.fib_*_battery_level
      options:
        style: |
          :host {
          --paper-item-icon-color: 
           {% if states(config.entity)|float <= 20 %} 
             red
           {% elif states(config.entity)|float <= 35 %}
             orange
           {% else %}
             var( ---state-icon-color )
           {% endif %}
           ;
           }
7 Likes
35

Thank you very much. This is working. :grinning:
Just one issue. It is not updating if the value changes,i.e. the color is not adapted continously.
After reloading the page, the color is adapted top the corresponding value.Is there a way to make it updating?

36

I honestly thought it would update when state change, but I have not researched this. Maybe it’s a browser issue?

37

Now it is updating. Don’t know what i have done. I restarted and refreshed (CTRL + F5) a few times before the last post.
Anyway.
I’m happy and thanks again for the help :+1:

38

Hi guys,
i would change status color of my washing machine.
I’ve tried with this code:

- entity: input_select.lavatrice_status
    options:
      style: |
        :host {
        --paper-item-icon-color: 
         if (state === 'In funzione') return [255,0,0]
         if (state === 'Finitura') return [255,255,0]
         else if (state === 'Panni Puliti') return [0,128,0];
    type: state-label

but without success.

Washing machine state is:

lavatrice_status:
  name: Lavatrice
  options:
    - Spenta
    - In funzione
    - Finitura
    - Panni puliti
  initial: Spenta

Please, could you give me an hand?
Thanks in advance,

Alessandro

39

Skip the “return [X;Y;Z]” and use HEX: #008000, or like this: rgba(200, 0, 0, 0.5)

40

I’ve tried like this:

Cattura

but it doesn’t work :frowning:

41 
        style: |
          :host {
          --paper-item-icon-color: 
           {% if states(config.entity)|float <= 20 %} 
             red
           {% elif states(config.entity)|float <= 35 %}
             orange
           {% else %}
             #4287f5
           {% endif %}
           ;
           }
1 Like