1000th question on changing icon color

Configuration Frontend
1

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

You are using jinga on a JavaScript based card

An example. The code can be consolidated, but this format helps understand the concept.

There are also other ways with this card type

type: custom:button-card
aspect_ratio: 4/1
entity: fan.bedroom_fan
name: "[[[ return states['fan.bedroom_fan'].attributes['percentage'];]]]"
icon: mdi:fan
styles:
  icon:
    - color: |
        [[[
          if (states['fan.bedroom_fan'].attributes['percentage'] == '16') return 'red';
          if (states['fan.bedroom_fan'].attributes['percentage'] == '33') return 'green';
          if (states['fan.bedroom_fan'].attributes['percentage'] == '50') return 'blue';
          else return 'yellow';
        ]]]

type: custom:button-card
entity: light.pc_lights
show_icon: true
show_name: false
style:
  left: 22%
  top: 50%
  width: 20%
state:
  - value: "on"
    styles:
      icon:
        - color: green
  - value: "off"
    styles:
      icon:
        - color: grey
3

You are awesome, I got it fixed (with a bit of help of ChatGPT)! Thanks!

1 Like
4

If one of the suggestions listed solves your problem, please consider clicking the solution button on that post to close the thread.

How to help us help you - or How to ask a good question

1 Like