Trouble with conditional CSS statement in slider-button-card

Configuration Frontend
1

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%};
  }
2

Did you ever solve this, as it’s driving me nuts trying to figure it out too!

3

I had the same problem but I got it to work. Here is my code.

type: custom:slider-button-card
entity: cover.livingroom_shade_front
slider:
  direction: top-bottom
  background: gradient
  use_state_color: true
  use_percentage_bg_opacity: true
  toggle_on_click: false
  show_track: true
  force_square: false
  invert: true
  show_attribute: false
  show_name: true
show_state: true
compact: false
icon:
  show: true
  use_state_color: false
  tap_action:
    action: toggle
  icon: ""
action_button:
  mode: custom
  icon: mdi:power
  show: false
  show_spinner: true
  tap_action:
    action: toggle
name: Front
attribute: current_position
show_attribute: false
layout_options:
  grid_columns: 2
  grid_rows: auto
card_mod:
  style: |
    :host {

      {% set position = (
    states.cover.livingroom_shade_front.attributes.current_position) |int  %}
      {% if position == 0 %}
        {% set slider_color = 'red' %}
        {% set icon_color = 'yellow' %}
        {%- else -%}
        {% set slider_color = '#03a31e' %}
         {% set icon_color = '#03a31e' %}
        {%- endif %}
      --state-color-on: yellow;      
      --state-color-off: {{slider_color}};  
      --slider-color: {{slider_color}};
      --icon-color: {{icon_color}} !important;
    }