1000th question on changing icon color

I know, I know, it has been asked thousands of times already, but I seem to have tried everything and nothing seems to work. Even ChatGPT can’t seem to help me out.

I have a code in a custom button card that checks whether a condition is met. If so, the background color changes to white and the text color to grey. This works flawlessly. The only thing I cannot seem to change is the icon color.

I am by no means a YAML expert and the code itself is actually already a bit too difficult for me to comprehend. Any help would be greatly appreciated.

Question: how can I get the icon color to change to amber when the condition is met (or when background changes to white)?

type: custom:button-card
template:
  - circle
  - light
entity: scene.woonkamer_alleen_eettafel_aan
name: Eettafel
icon: mdi:silverware-fork-knife
size: 80%
show_state: false
aspect_ratio: 1/1
styles:
  icon:
    - color: |
        {% set required_on = is_state('light.eettafel', 'on') %}
        {% set forbidden_on = [
          'light.keuken',
          'light.zithoek',
          'light.lamp_hoek'
        ] %}
        {% set any_forbidden_on = forbidden_on | select('is_state', 'on') | list | count > 0 %}
        {% set is_background_white = required_on and not any_forbidden_on %}

        {% if is_background_white %}
          red  /* Icon wordt rood als de achtergrond wit is */
        {% else %}
          var(--primary-text-color)
        {% endif %}
card_mod:
  style: >
    {% set required_on = is_state('light.eettafel', 'on') %}

    {% set allowed_on = [
      'light.achtertuin',
      'light.kerstboom',
      'light.slaapkamer',
      'light.slaapkamer2'
    ] %}

    {% set forbidden_on = [
      'light.keuken',
      'light.zithoek',
      'light.lampje'
    ] %}

    {% set any_forbidden_on = forbidden_on | select('is_state', 'on') | list | count > 0 %}
    {% set is_background_white = required_on and not any_forbidden_on %}

    ha-card {
      background-color: 
        {% if is_background_white %} white 
        {% else %} var(--ha-card-background, var(--card-background-color)) 
        {% endif %} !important;
    }

    .button-card-main {
      color: 
        {% if is_background_white %} grey 
        {% else %} var(--primary-text-color) 
        {% endif %} !important;
    }

2 posts - 2 participants

Read full topic