I am trying to use CSS within custom:slider-button-card to change the icon color depending on if the entity is ‘on’ or ‘off’. I can’t figure out why my code isn’t working. Basically, I want the --icon-color: to be one color if the entity is on, and another if it is off.
type: custom:slider-button-card
slider:
direction: left-right
background: gradient
use_state_color: false
use_percentage_bg_opacity: true
show_track: false
toggle_on_click: false
force_square: true
show_name: true
show_state: true
compact: false
icon:
show: true
use_state_color: false
tap_action:
action: more-info
icon: ''
action_button:
mode: custom
icon: mdi:power
show: true
show_spinner: true
tap_action:
action: toggle
entity: light.basement_office_light_switch
style: |
:host {--slider-color: CornflowerBlue !important;}
:host {--action-icon-color-off: Gainsboro !important;}
:host {--action-icon-color-on: gold !important;}
:host {
--icon-color: {% if is_state('light.basement_office_light_switch', 'on') %}red{%else%}green{%endif%};
}