Frontend: Change icon color based on state
Not sure if this is a bug or if I’m just doing something wrong but for the life of me I cant get the icon to change colors based on whether my switch or input_boolean is on or off. Without the change of color, it’s just an icon? I’m assuming this must be a bug
jer78
All 29 comments
I don't think that is a bug (may be the feature is not implemented yet). Currently, I am using customize to change the icon colors. See here.
arsaboo
on 13 Aug 2018
Thanks @arsaboo. I am using your suggestion of customize but I think that may be a workaround since the themes should determine the on/off color?? It would be nice to have the colors in the themes and Lovelace use those unless it’s specifically called out in the style section.
jer78
on 14 Aug 2018
It should change from gray -> white when turned on. Is this not happening?
jeradM
on 21 Aug 2018
I noticed the same thing. I added a group which consists of two lights to the glance card. I changed the icon to mdi:lightbulb. When off it looks just like the other lights in de glance card. However, when the group is on, the icon stays the same color.
Would be nice if this would change like the rest, or to have an option to configure the icon color based on state.
- type: glance
title: Living room
entities:
- entity: group.couch_lights
name: Couch
tap_action: toggle
icon: mdi:lightbulb
- light.table
nessinot
on 15 Dec 2018
@nessinot try a light group instead
iantrich
on 15 Dec 2018
Wow, never knew that existed. It solved my problem.
Thanks @iantrich
nessinot
on 15 Dec 2018
Continuing conversation from https://github.com/home-assistant/home-assistant-polymer/pull/1716
iantrich
on 14 Jan 2019
I don't think that is a bug (may be the feature is not implemented yet). Currently, I am using
customizeto change the icon colors. See here.
I tried this with the input_boolean but it doesn't work.
It's seeing the customization but my picture_entity in lovelace doesn't change colour
Or am I supposed to be using custom_ui or am I missing something?
- cards:
- type: 'custom:compact-custom-header'
- cards:
- entities:
- input_boolean.alarmgaragedoor
- switch.sonoff51083
- switch.sonoff63719
show_header_toggle: false
title: Security
type: entities
- cards:
- entity: switch.sonoff51083
tap_action:
action: call-service
service: switch.turn_on
service_data:
entity_id: switch.sonoff51083
type: entity-button
- entity: switch.sonoff63719
tap_action:
action: call-service
service: switch.turn_on
service_data:
entity_id: switch.sonoff63719
type: entity-button
- entity: input_boolean.alarmgaragedoor
name: Exit-Enter
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.alarmgaragedoor
type: entity-button
DavidFW1960
on 15 Jan 2019
Templates in customize is from custom-ui. It's not a feature of Home Assistant.
thomasloven
on 15 Jan 2019
That explains why it doesn’t work I guess lol.... @iantrich shunted me off to here though as it’s not an ‘issue’
DavidFW1960
on 15 Jan 2019
I think this would be a nice new feature... I use a lot of input boolean as a switch, but I can't use the entity-button card for this.
matisaul
on 21 Feb 2019
+1 for this ... Seems like a very common need ... to show Button icons that reflect the state (ideally entity-button?). Anyone have a work around until this is implemented?
Edit: Found this that seems like it will get us most of the way there https://github.com/custom-cards/button-card
fryguy04
on 1 Apr 2019
+1
Changed all my custom:button-cards (I'm tired of it) to entity-button and having the same problem.
State for input_booleans and automations not colored.
A workaround is using the state-switch from thomasloven with two cards for one entity.
VDRainer
on 14 Apr 2019
Each time this comes up, I say the same thing: don't suggest that we need to color this or that, instead, come up with a strategy that we can use for each place (entity row, entity button etc) on how we should color each type of entity/device class and each of their states.
balloob
on 15 Apr 2019
@balloob How about something like state_color, which should work like our current state_icon?
arsaboo
on 15 Apr 2019
Hmm...
If an entity is 'on' -> color (like the switch and the light already does)
VDRainer
on 16 Apr 2019
Adding a config option so you have a tool solve your problem won't solve it for others, but instead requires each user to solve the same problems.
balloob
on 16 Apr 2019
Not sure I understand your comment Paulus. Are you opposed to having a config option to change colors?
arsaboo
on 16 Apr 2019
I would prefer that we have a icon coloring strategy for each entity component
balloob
on 17 Apr 2019
We can have a default coloring strategy (like yellow if on), but a) it will be quite limiting, and b) not sure if it will work with themes.
arsaboo
on 17 Apr 2019
+1 for adding support for color changes for all entities that can have a status on/off. This is already working for lights, switches and binary_sensors (like door/motion sensors) but not for input_booleans which also have a status on or off.
Only workaround right now is to create an extra template sensor on top of the input boolean so that we can give it a proper device_class which helps setting icon and color in lovelace. This could/should be easier to do though.
RezzZ
on 16 Sep 2019
So to get the ball rolling on this I plan to implement icon_color for all cards that have icons; at the entity level if it supports multiple entities per card.
From there, I would like to develop some sort of state-config-merge card where you could define a state filter to match against that would then provide config changes to the underlying card
e.g.
type: state-config-merge
states:
- value: on
config:
icon: mdi:bulb
icon_color: yellow
card:
type: light
entity: light.bed
icon: mdi:lamp
@iantrich I was going to open a similar issue, but I found this one.
In my case, I have a switch that I want to display in a read-only state. Because this isn't possible yet (I'll open a feature request for this) I've added a template that displays On or Off, but I can't setup icon color for that template. My switch is blue when is off and yellow when is on (the default behavior). I'd like to do the exact same thing for template - specify an icon and icon color using a template. Something like this:
podlogowka_salon_status:
friendly_name: "Podgłogówka Salon"
value_template: "{% if is_state('switch.salon', 'on') %}wł.{% else %}wył.{% endif %}"
icon_template: >-
{% if is_state('switch.podlogowka_salon', 'on') %}
mdi:flash
{% else %}
mdi:flash-off
{% endif %}
icon_color_template: >-
{% if is_state('switch.podlogowka_salon', 'on') %}
rgb(253, 216, 53)
{% else %}
rgb(68, 115, 158)
{% endif %}
I'm not sure if this is related, but it would be very useful to be able to specify that at entity level.
Misiu
on 4 Oct 2019
@iantrich do you already have that prototyped as a card type somewhere?
pho3nixf1re
on 5 Oct 2019
Not yet
iantrich
on 5 Oct 2019
@iantrich I've forked HA repo and started adding changes to support icon_color_template.
Any chance you could take a look? https://github.com/Misiu/home-assistant/commit/c36fa7c2de95a9d745f8da01acaf9b753bc03454
I've only done sensor, binary sensor and I've added test for it.
If I get approval on that I can add that property to other files (cover, light, switch) and write simple tests.
What format should be supported?
#fff000
red
rgba(250, 114, 122, .5)
Misiu
on 9 Oct 2019
@Misiu yes, a string. That sounds fine by me but it will be a separate PR for the frontend to support that attribute.
I don't really do much backend stuff, I'll leave reviewing of that to more knowledgeable folks
iantrich
on 9 Oct 2019
@iantrich thanks, I'll edit the rest of the files, add test and create PR. Hopefully, I won't mess something up.
First, let's work on the backend and then the frontend.
I've managed to start the development of the backend using Dev Containers on windows 10
Does a similar Dev Container exist for the frontend? That would help a lot!
Misiu
on 9 Oct 2019
iantrich
on 9 Oct 2019
Related issues
bmf7777
·
3Comments
wangyt123ng
·
3Comments
SeanPM5
·
4Comments
andriej
·
3Comments
SeanPM5
·
3Comments
Most helpful comment
I think this would be a nice new feature... I use a lot of input boolean as a switch, but I can't use the entity-button card for this.