Change icon color based on state

[jer78]

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

[arsaboo]

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.

[jer78]

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.

[jeradM]

It should change from gray -> white when turned on. Is this not happening?

[nessinot]

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

[iantrich]

@nessinot try a light group instead

[nessinot]

Wow, never knew that existed. It solved my problem.

Thanks @iantrich

[iantrich]

Continuing conversation from #1716

[DavidFW1960]

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.

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

[thomasloven]

Templates in customize is from custom-ui. It's not a feature of Home Assistant.

[DavidFW1960]

That explains why it doesn’t work I guess lol.... @iantrich shunted me off to here though as it’s not an ‘issue’

[matisaul]

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.

[fryguy04]

+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

[VDRainer]

+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.

[balloob]

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.

[arsaboo]

@balloob How about something like state_color, which should work like our current state_icon?

[VDRainer]

Hmm...
If an entity is 'on' -> color (like the switch and the light already does)

[balloob]

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.

[arsaboo]

Not sure I understand your comment Paulus. Are you opposed to having a config option to change colors?

[balloob]

I would prefer that we have a icon coloring strategy for each entity component

[arsaboo]

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.

[RezzZ]

+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.

[iantrich]

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

[Misiu]

@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.

[pho3nixf1re]

@iantrich do you already have that prototyped as a card type somewhere?

[iantrich]

Not yet

[Misiu]

@iantrich I've forked HA repo and started adding changes to support icon_color_template.
Any chance you could take a look? Misiu/home-assistant@c36fa7c
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)

[iantrich]

@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

[Misiu]

@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!

[iantrich]

No. https://developers.home-assistant.io/docs/en/frontend_development.html