Mushroom-template-chips: How to change Text Color?

Configuration Frontend
21

Please try this…

icon_color: >
  {% set k =  states('sensor.presa_multimediale_cucina_power')| int (0) %}
    {% set d = states[switch.presa_multimediale_cucina'].state %}
    {% if (k >= 20 and d == 'on')  %} green
    {% elif (d  == 'off')  %} red
    {% else %}
    grey
    {% endif %}
22

no…
It works well only with the socket turned on and consumption below 20W
image

with consumption above 20W it still remains gray and not green as I would like
image

with the socket off the icon does not turn red
image

I feel guilty for asking such a seemingly silly question, but I realize it’s very peculiar

I’ll post the complete code to make sure I haven’t made any mistakes:

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-template-card
        primary: Presa Multimediale Cucina
        secondary: '{{states.sensor.presa_multimediale_cucina_power.state}} W'
        icon: >-
          {% if is_state(entity, 'off') %} mdi:power-plug-off-outline {%- else
          -%} mdi:power-plug-outline {% endif %}
        icon_color: >
         {% set k =  states('sensor.presa_multimediale_cucina_power')| int (0) %}
         {% set d = states[switch.presa_multimediale_cucina'].state %}
         {% if (k >= 20 and d == 'on')  %} green
         {% elif (d  == 'off')  %} red
         {% else %}
         grey
         {% endif %}
        fill_container: true
        layout: vertical
        tap_action:
          action: more-info
        entity: switch.presa_multimediale_cucina
        multiline_secondary: truee;
        card_mod:
          style: >
            ha-card { {% set power =
            states('sensor.presa_multimediale_cucina_power') | float%} {% if
            power <= 0 %} --card-primary-color:grey;--card-secondary-color:grey;
            {% elif power < 100 %}
            --card-primary-color:white;--card-secondary-color:green; {% elif
            power < 200 %}
            --card-primary-color:white;--card-secondary-color:lime; {% elif
            power < 500 %}
            --card-primary-color:white;--card-secondary-color:yellow; {% elif
            power < 800 %}
            --card-primary-color:white;--card-secondary-color:yellow; {% elif
            power < 1000 %}
            --card-primary-color:white;--card-secondary-color:yellow; {% elif
            power < 1500 %}
            --card-primary-color:white;--card-secondary-color:orange; {% else %}
            --card-primary-color:white;--card-secondary-color:red; {% endif
            %}
23

sorry missed a single quote.

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-template-card
        primary: Presa Multimediale Cucina
        secondary: '{{states.sensor.presa_multimediale_cucina_power.state}} W'
        icon: >-
          {% if is_state(entity, 'off') %} mdi:power-plug-off-outline {%- else
          -%} mdi:power-plug-outline {% endif %}
        icon_color: >
         {% set k =  states('sensor.presa_multimediale_cucina_power')| int (0) %}
         {% set d = states('switch.presa_multimediale_cucina') %}
         {% if (k >= 20 and d == 'on')  %} green
         {% elif (d  == 'off')  %} red
         {% else %}
         grey
         {% endif %}
        fill_container: true
        layout: vertical
        tap_action:
          action: more-info
        entity: switch.presa_multimediale_cucina
        multiline_secondary: truee;
        card_mod:
          style: >
            ha-card { {% set power =
            states('sensor.presa_multimediale_cucina_power') | float%} {% if
            power <= 0 %} --card-primary-color:grey;--card-secondary-color:grey;
            {% elif power < 100 %}
            --card-primary-color:white;--card-secondary-color:green; {% elif
            power < 200 %}
            --card-primary-color:white;--card-secondary-color:lime; {% elif
            power < 500 %}
            --card-primary-color:white;--card-secondary-color:yellow; {% elif
            power < 800 %}
            --card-primary-color:white;--card-secondary-color:yellow; {% elif
            power < 1000 %}
            --card-primary-color:white;--card-secondary-color:yellow; {% elif
            power < 1500 %}
            --card-primary-color:white;--card-secondary-color:orange; {% else %}
            --card-primary-color:white;--card-secondary-color:red; {% endif
            %}
1 Like
24

Top!!!
image
image
image

1 Like
25

Awesome!!! Glad we got it.

1 Like
26

This should work, but I was a little confused on the colors. We may be able to shorten the code up because you have multiple stages with the same color scheme

--card-primary-color:white;--card-secondary-color:yellow

The error was result of the integer not being clearly defined

card_mod:
      style: |
        ha-card {
          {% set e = states('sensor.presa_multimediale_cucina_power') | int(0)  %}
            {% if (e | int(0) <= 0 ) %} --card-primary-color:white;--card-secondary-color:red
            {%  elif (e | int(0) <= 100 ) %} --card-primary-color:white;--card-secondary-color:green
            {%  elif (e | int(0) <= 200 ) %} --card-primary-color:white;--card-secondary-color:lime
            {%  elif (e | int(0) <= 500 ) %} --card-primary-color:white;--card-secondary-color:yellow
            {%  elif (e | int(0) <= 800 ) %}  --card-primary-color:white;--card-secondary-color:yellow
            {%  elif (e | int(0) <= 1000 ) %} --card-primary-color:white;--card-secondary-color:yellow       
            {%  elif (e | int(0) >= 1500 ) %} --card-primary-color:white;--card-secondary-color:orange
            {% else %} 
            --card-primary-color:grey;--card-secondary-color:grey
            {% endif %}
              ;
                 }
1 Like