Icon color change doesn't update (card-mod)

Configuration Frontend
1

Hi!
I’m trying to change icon color based on entity state with card-mod.
It switches to green with my TV, and back to default white when off, but the fan stays green even after switching it off. The icon changes to the crossed fan icon when off, but the color stays green.
If I refresh the webpage, the icon refreshes to the default color.

  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: media_player.lg_tv
        name: TV
        content_info: name
        use_entity_picture: false
        tap_action:
          action: call-service
          service: script.lg_tv_toggle
        hold_action:
          action: more-info
        card_mod:
          style: |
            :host {
              --card-mod-icon-color:
                {% if is_state('media_player.lg_tv', 'on') %} 
                  green;
                {% endif %};
      - type: entity
        entity: fan.smart_fan
        name: Ventillátor
        tap_action:
          action: toggle
        content_info: name
        card_mod:
          style: |
            :host {
              --card-mod-icon-color:
                {% if is_state('fan.smart_fan', 'on') %} 
                  green;
                {% endif %};
2

That’s because you did not tell it what to do if off (only on):

Try adding an else case.

3

You don’t have to use car_mod for the icon color change if you switch to the template version of Mushroom-Chips-Card.

You can template the color in icon_color:

type: custom:mushroom-chips-card
chips:
      - type: template
        entity: media_player.lg_tv
        icon: mdi:television
        icon_color: |
          {% if is_state('media_player.lg_tv', 'on') %} 
                  green
           {% else %}
                 red
           {% endif %}
        name: TV
        content_info: name
        use_entity_picture: false
        tap_action:
          action: call-service
          service: script.lg_tv_toggle
        hold_action:
          action: more-info

      - type: template
        entity: fan.smart_fan
        icon: mdi:fan
        icon_color: |
          {% if is_state('media_player.lg_tv', 'on') %} 
                  yellow
           {% else %}
                 blue
           {% endif %}
        name: Ventillátor
        tap_action:
          action: toggle
        content_info: name
4

I tried that, didn’t make a difference, and I don’t think it should be the issue, because the TV works without an else case.

Edit:
Sorry, you are right, I formatted my code wrong, that is why it didn’t work.
This works:

...
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
            {% if is_state('media_player.lg_tv', 'on') %} 
              green;
            {% else %}
              white;
            {% endif %};

However, white is not the default color. Do you know what is? Now there is a slight difference between the default white icons and my white icons.
image

5

This didn’t refresh either, and makes it a bit more complex if I want the icons to change when the state changes, which was done by default in my config. With this I should template the icons too.
It is a different approach, and could be a solution, thank you!

6

Use this instead of white;

var(--state-icon-color);

This will pick up whatever your theme has the icon colour set as.

7

Hm, this made them blue, which is correct, but then, how can I find out what the default color is in the Mushroom Chip card?
image

8

Found it by trial and error: light gray

9

You can always use the Chrome Dev tool or look in the JS to see what is being assigned as the default color.