By default, “light” entities take the colour of the light (if the light is pink, the icon will be pink). How can I disable this behaviour, and simply have two colours for the icon - on and off - like it is the case for non-light entities?
card-mod:
type: entities
entities:
- entity: light.bathroom_ceiling
- entity: light.koridor_ceiling
card_mod:
style:
hui-generic-entity-row $ state-badge $: |
ha-state-icon {
{% if is_state(config.entity,'on') %}
color: var(--paper-item-icon-active-color) !important;
filter: none !important;
{% endif %}
}
Since you need to use “config.entity” - you CANNOT specify the style on the card’s level:
type: entities
entities:
- entity: light.bathroom_ceiling
- entity: light.koridor_ceiling
card_mod:
style:
xxxx
you have to repeat the code for every element instead:
type: entities
entities:
- entity: light.bathroom_ceiling
card_mod: &ref_style_light
style:
xxxx
- entity: light.koridor_ceiling
card_mod: *ref_style_light
For other cards like glance, picture-elements - do it similarly.
For details - please continue the discussion in the dedicated card-mod thread, let it be in one place.
1 Like
Thanks, using your answer as a starting point, I found a solution using themes that can be applied globally:
card-mod-row-yaml: |
"hui-generic-entity-row $ state-badge $": |
ha-state-icon[data-state="on"] {
color: var(--paper-item-icon-active-color) !important;
filter: none !important;
}
Interesting thing, gonna test it!
So there is this:
state_color: false
which will disable the coloring, but now the buttons all have the same color no matter if they are on or off.
Is there any way to make so they are yellow if they are on like any other non-light buttons?
I accomplished this using card-mod:
I only add these lines under an entity that the card wants to use the color value provided by the device. This ignores that and sets it to the same colors used by other entity icons on the card. This is for a set of lights hanging from porch pillars (their ‘curtain’ type).
- entity: light.pillars
icon: mdi:pillar
card_mod:
style: |
:host {
--card-mod-icon-color: {% if is_state(config.entity, 'on') %} rgb(var(--rgb-state-switch-color)) {% else %} var(--state-icon-color) {% endif %};
}
I only need to do this (well, currently anyway) to just some Twinkly holiday lights. I’d be tempted to see if I could alter the device code for the lights themselves to not report the color value, and thus not have to add the code on cards. It’s not like a multi-color light string is even going to HAVE a single color to report, so it’s sort of annoying to have to work around it this way, but c’est la vie.
1 Like
Thanks to all for the information in this thread.
I had a slightly different use case. I wanted the light icon to follow the color of the light except when the light was set to white, in which case I wanted the icon color to be the same as a non-colored light turned on. The following is what I came up with that seems to work:
type: entities
entities:
- entity: light.bonus_room_light
card_mod:
style:
hui-generic-entity-row $ state-badge $: |
ha-state-icon {
{% if is_state(config.entity,'on') and state_attr(config.entity, 'hs_color' )[1] <= 10 %}
color: var(--state-light-active-color) !important;
filter: none !important;
{% endif %}
}
[EDIT this to account for the changes in release 2023.2]
2 Likes
Do I have to install something to make this work?
I’ve added your lines, but with no effect at all…
Check if you have card-mod installed (google what card-mod is).
Thanks, I thought it had to be something like that…
Was installing it at the time of your reply…
Don’t know where to check if it’s active. Still no result…
Call a Code Inspector (it is called so in Chrome) by F12.
Open “Info”, type “card-mod” to filter entries.
If no card-mod entry is found → card-mod not installed.
I see this… Not completely without errors…
You should sort this issue “is card-mod properly installed?” issue before next attempts to use it.
Open github card-mod repo and check if all steps to install it were performed.
I use picture elements and try to show a light entity icon only in white when it’s on. I couldn’t figure it out yet. Can someone help me?
- type: conditional
conditions:
- entity: light.wohnzimmer_lichtgruppe
state: 'off'
elements:
- type: state-icon
icon: mdi:lightbulb-group
entity: light.wohnzimmer_lichtgruppe
action: none
tap_action:
action: toggle
hold_action: none
style:
top: 22.9%
left: 76.3%
transform: translate(-50%, -50%) scale(1.3, 1.3)
'--paper-item-icon-color': black
opacity: 0.15
- type: conditional
conditions:
- entity: light.wohnzimmer_lichtgruppe
state: 'on'
elements:
- type: state-icon
icon: mdi:lightbulb-group
entity: light.wohnzimmer_lichtgruppe
action: none
tap_action:
action: toggle
hold_action: none
style:
top: 22.9%
left: 76.3%
transform: translate(-50%, -50%) scale(1.3, 1.3)
opacity: 1