#Button Card - Icon Color

1 messages · Page 1 of 1 (latest)

celest osprey
#

Hello, I am trying to figure out how to change the color of my lighting buttons. I would like to specify 3 colors, off, partially on, and all on for a light group. I tried a few things with no luck. I have a feeling what I tried is conflicting with Card Mod. Any suggestions?

show_icon: true
type: button
icon: mdi:home
icon_height: 50px
show_state: false
grid_options:
  columns: 3
  rows: 2
entity: light.house_lights
hold_action:
  action: navigate
  navigation_path: "#pop-up-houselights"
card_mod:
  style:
    mushroom-state-info$: |
      .primary {
        white-space: normal !important;}
    .: |
      ha-card {
        box-shadow: none;
        background_color: none;}```
vital vault
#

I think you have to use Custom Button Card from HACS to achieve this. There you can set Icon Colors through a template.

# 
show_entity_picture: true
state:
  - value: 'off'
    icon: mdi:garage-open
    color: red
  - value: 'on'
    icon: mdi:garage-lock
    color: green
tap_action:
  action: toggle
entity: binary_sensor.shelly_shsw_1_e8db84d7180f_switch
show_state: false
show_label: true
size: 20%
label: |
  [[[
    if (states['binary_sensor.shelly_shsw_1_e8db84d7180f_switch'].state === "on")
      return "closed";
    else if (states['binary_sensor.shelly_shsw_1_e8db84d7180f_switch'].state === "off")
      return "open";
  ]]]````
image0.jpg
celest osprey
#

Thanks I'll give this a shot. any idea how to do partially on? or what that value might be?

#

for instance if 1 light is on I want a muted accent color.

#

also, do you run into issues with light or dark mode?

#

say if I have black or white, not sure how to make that flip

vital vault
#

You'd have to check how many lights are on in the group, I do that with a numeric template sensor. For light and dark mode you have to define color values in your theme and you can recall them in your button I.E. var(--red-color) or var(--dark-red-color). This projectis more on the advanced side of things. But it's decent start to get into templating.

stray cliff
#

@celest osprey looks like you tried to use code intended Mushroom card and not stock button card. Cards have slight differences in their code which affect how card mod is used and applied.

stray cliff
stray cliff
#

Here's my take. ```yaml
type: button
show_name: true
show_icon: true
icon: mdi:home
icon_height: 50px
show_state: false
entity: light.living_room_lights
card_mod:
style: |
ha-card {
--card-mod-icon-color: white;
--primary-text-color: white;
{% set count = expand(config.entity) | rejectattr ('state', 'in', ['unknown','unavailable']) | map(attribute='entity_id') | list | count %}
{% set count_on = expand(config.entity) | map(attribute='entity_id') | select('is_state', 'on') | list | count %}
{% if count_on == 0 %}
background-color: red;
{% elif count_on != count %}
background-color: yellow;
--card-mod-icon-color: black;
--primary-text-color: black;
{% elif count_on == count %}
background-color: green;
{% else %}
background-color: pink;
{% endif %}
}

EDIT: Added `--primary-text-color: white;` to the beginning of the card_mod; not shown in screenshot.
20250719-1749.gif
soft light
#

Sorry to desturb the tread.. but this look just like a thing I have workt with.. But I have to gates I like to have in ONE card ?!

stray cliff
# soft light Sorry to desturb the tread.. but this look just like a thing I have workt with.....

The same concept could be applied easily especially if the gates have their own entities. Even if they are not in a group, you could write an IF statement that checks the state of each gate.
IF gate1 == closed and gate2 == closed then color green
ELIF gate1 == open OR gate2 == open then color yellow
ELIF gate1 == open and gate2 == open then color red
(Remember, binary sensor states are usually on or off. The frontend translates the state to open/closed (based on the device class) so you would need to check for on/off.)

#

With that said, you could make a group for the gates and the above example should work. (You may have to change select('is_state', 'on') to select('is_state', 'off') in order to count gates that are open.)

stray cliff
# 
type: button
show_name: true
show_icon: true
name: Gates
icon_height: 50px
card_mod:
  style: |
    ha-card {
      --card-mod-icon-color: white;
      --primary-text-color: white;
      {% set gate1 = 'binary_sensor.living_room_door_on_off' %}
      {% set gate2 = 'binary_sensor.hallway_closet' %}
      {% if is_state(gate1, 'on') and is_state(gate2, 'on') %} 
        background-color: red; 
        --card-mod-icon: mdi:gate-alert;
      {% elif is_state(gate1, 'on') or is_state(gate2, 'on') %} 
        background-color: yellow; 
        --card-mod-icon-color: black; 
        --primary-text-color: black;
        --card-mod-icon: mdi:gate-open
      {% elif is_state(gate1, 'off') and is_state(gate2, 'off') %} 
        background-color: green;
        --card-mod-icon: mdi:gate;
      {% else %} 
        background-color: pink;
      {% endif %}
    }
```EDIT: Added `--primary-text-color: white;` to the beginning of the card_mod; not shown in screenshot.
20250720-1942.gif
soft light
celest osprey
stray cliff
# soft light Works 90%... the Yellow part on gate2 never shows... but green and red works fi...

That's weird that gate2 is acting like that. I did some experimenting and my gate2 seems to work fine in terms of going yellow if my gate1 is closed. I used Dev Tools > States to change the states accordingly.
Try this: open gate2 (or set to 'on') with gate1 closed (or set to 'off') and refresh your browser/app. I'm curious what color you get after refreshing.
Perhaps also try flipping the gates in this line (move gate1 to gate2 and vice versa): {% elif is_state(gate2, 'on') or is_state(gate1, 'on') %}. I'm curious if the problem persists on gate2 or does it change to gate1. This shouldn't really matter but, again, it is more just for curiousity.

soft light
stray cliff
soft light
#

I think my "problem" is in line to..

#

show_entity_picture: true
entity: binary_sensor.shelly_blu_door_window_4eae_window
show_state: false
show_label: true
size: 20%
type: button
show_name: true
show_icon: true
name: Garage
icon_height: 50px
card_mod:
style: |
ha-card {
--card-mod-icon-color: white;
{% set gate1 = 'binary_sensor.shelly_blu_door_window_4eae_window' %}
{% set gate2 = 'binary_sensor.60_ef_ab_4a_61_51_6151_window' %}
{% if is_state(gate1, 'on') and is_state(gate2, 'on') %}
background-color: red;
--card-mod-icon: mdi:gate-alert;
{% elif is_state(gate1, 'on') or is_state(gate2, 'on') %}
background-color: yellow;
--primary-text-color: black;
--card-mod-icon: mdi:gate-open
{% elif is_state(gate1, 'off') and is_state(gate2, 'off') %}
background-color: green;
--card-mod-icon: mdi:gate;
{% else %}
background-color: pink;
{% endif %}
}

stray cliff
# soft light The resoult is the same... {% elif is_state(gate1, 'on') or is_state(gate2, 'on...

Setting the entity in Line 2 shouldn't matter; that's only going to affect the tap_action which is going to bring up the More Info for that entity. I think show_entity_picture is extraneous because the binary_sensor entity itself does not have a picture associated with it so that shouldn't matter. Otherwise, your code works just fine for me. The only difference is yours does not have the icon color in the IF statement with the OR comparison.

image.png
soft light
#

Hmm. on you's is the backgroud that change color.. mine is the icon... ?!

#

Close and close

image.png
#

Open and close

image.png
#

open and open

image.png
#

Hmm that one fail to... is had to be red ??

#

And Close and open... had to be yellow but

image.png
stray cliff
#

my guess is now something changed in your code somewhere because you no longer have the gate icons nor the colors from the IF statements. So the card_mod is not being processed. Could be indentation or missing a semi-colon at the end of the lines.