I know i use to do it that way but since it broke i reverted to my work around anyway i use animated svg already to enhance the visibility of active states so for me the change was little
I also have custom-ui and 0.88.1 and I use this in customize
sensor.door_front:
templates:
hs_color: >
if (state === 'Open') return [0,100,50];
return [120,100,19];
This works for me
3 Likes
Is that now built in to HA or are you still using Custom-UI to get that effect?
Still using custom ui.
which is rather remarkable, since before icon_color was introduced, rgb_color was used, (suppose hs_color too) but that has been replaced.
That this would work now is surprising to say the least (though very welcome indeed).
My interface would be nowhere without icon_color templates, so my main setup is still on 84.3…
yes this is remarkable as i remember a discussion about a year ago about not using hs_color in favour of rgb when using icon_color with custom ui (you’re name rings a bell to me on this one)
I can confirm however this is functioning using hs_color, although choosing a hs color value is frought with a bit of complexity
the best guess i can see is that this uses HSB HSV value which i found a color picker from here
much easier defining rgb values
custom ui version i am using is 20190113
and Hass 88.2
for example
templates:
hs_color: >
if (state > 2500) return [0,100,100];
else if (state > 1500) return [60,100,100];
else if (state > 1000) return [240,100,100];
else if (state > 200) return [120,100,50];
else return [120,100,20];
2 Likes
Ok I will test as you suggest.
For the template : you can leave out all ‘else’s.
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.
我尝试用以下的代码来改变空调开启关闭时候的颜色，也没有成功
climate.zhu_wo:
icon: mdi:quadcopter
templates:
hs_color: >
if (state === 'cool') return [48,76,251];
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 
7 Likes
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.
+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.
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
You can set the color in the theme or maybe use card-mod
you still can do that using custom-ui…?
yeah custom ui still works
For how long? Doesn’t it rely on the states UI?
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
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)
You can use:
https://github.com/thomasloven/lovelace-card-mod.
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