Change the color of an icon based on state

I’m trying to set the fan icon on my Mushroom Template card to be red, blue or green based on the state of my AC and the fan speed.

My AC has three speeds - low, medium and high. I have three buttons to set the speed. This works fine. I have the following code to set the color of the icon and this also works fine.

  - type: custom:mushroom-template-card
    primary: Medium
    secondary: ''
    icon: mdi:fan
    tap_action:
      action: call-service
      service: climate.set_fan_mode
      data:
        fan_mode: medium
      target:
        device_id: 82c2cfec7506270e0c57b40423e81543
    icon_color: >-
      {% if is_state('climate.ac_daikin', 'heat') and
      state_attr('climate.ac_daikin', 'fan_mode') == 'medium' %}
        red
      {% endif %}

But I wan’t to set the color based on what the AC is doing - heating, cooling or fan only. I have tried the below but this does not work.

  - type: custom:mushroom-template-card
    primary: Low
    secondary: ''
    icon: mdi:fan
    tap_action:
      action: call-service
      service: climate.set_fan_mode
      data:
        fan_mode: low
      target:
        device_id: 82c2cfec7506270e0c57b40423e81543
    icon_color: >-
      {% if is_state('climate.ac_daikin', 'heat') and
      state_attr('climate.ac_daikin', 'fan_mode') == 'low' %}
        red
      {% elseif is_state('climate.ac_daikin', 'cool') and state_attr('climate.ac_daikin', 'fan_mode') == 'low' %}
        blue
      {% elseif state_attr('climate.ac_daikin', 'fan_mode') == 'low' %} and state_attr('climate.ac_daikin', 'fan_mode') == 'low' %}
        green
      {% endif %}

First, it should be elif, not elseif. At least, I assume so, if this custom card using normal Jinja templating.

Second, you should always have an else clause. It’s generally not good to have the possibility that the template renders no result.

Third, I believe in most, if not all, cases the state of a climate entity is the mode it is in, not what it’s currently doing. I.e., heat means it’s in heating mode, not that it is currently heating. For that you should look at the hvac_action attribute. I say, “in most cases”, because it may be dependent on the exact thermostat integration you’re using.

Hope this helps.

1 Like

Aha - elif! Working perfectly now thanks!

1 Like

I have a similar question.

I want the icon to change color based on the color of the light its controlling

the code i am currently using, makes the circle background of the icon disappear.

image

any way to fix this?

{% if is_state('light.living_room_lights', 'on') %}
{{ state_attr("light.living_room_lights", "rgb_color")[0] }} {{ state_attr("light.living_room_lights", "rgb_color")[1] }} {{ state_attr("light.living_room_lights", "rgb_color")[2] }}
{% endif %} 
{% if is_state('light.living_room_lights', 'on') %}
{{ state_attr("light.living_room_lights", "rgb_color")[0] }} {{ state_attr("light.living_room_lights", "rgb_color")[1] }}, {{ state_attr("light.living_room_lights", "rgb_color")[2] }}
{% endif %}

adding 1 comma after the 2nd rgb fixes issue
image