Hello, I could use some assistance.
I’m attempting to use a combination of auto-entities and slider-entities-row. It’s working great except the icon colors for the lights aren’t the same and for this card, I’d prefer to just have the lights yellow for an on state and white for an off state.
I have attempted to use card-mod to achieve this goal, but my results have been lackluster. I’m not sure how but I’ve managed to change the icon color for only one light. Would someone mind taking a look at my yaml and helping me fix whatever I’m doing wrong? I’d really love to understand but I’m quite new to using CSS.
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#media-room"
name: Media Room Lights
icon: mdi:lightbulb-group
- type: custom:auto-entities
card:
type: entities
state_color: false
card_mod:
style: |
:host {
--state-light-active-color: var(--blue-color);
color: purple;
--paper-icon-color: white;
--paper-item-icon-color: white;
}
filter:
include:
- area: media_room
domain: light
options:
type: custom:slider-entity-row
toggle: true
card_mod:
style: |
:host {
--state-light-active-color: var(--blue-color);
color: purple;
--paper-icon-color: white;
--paper-item-icon-color: white;
}
exclude: []
sort:
method: friendly_name
numeric: false
I’m calling card_mod twice intentionally here as I used it to test if setting it at the card level would force a change. No such luck.
Also here is a screenshot of my CSS if it helps
