How to change icon color with several options

Configuration Frontend
1

Hello, i try to get my icon change color and get it done with the following code, but that limits me to just the if clause and the else as variants.
‘’’
{{ ‘light-blue’ if states(‘climate.ac_livingroom’) == ‘cool’ else ‘dark-grey’ }}‘’‘’

How can i ask for more states and assign colors?
I tried elif, eseif and or but either my syntax wasnt right or it needs to be totally different.
Can someone point me into the right direction?
It is for the icon color field in a mushroom card

Thx alot

2

Hi Darkyputz,

The Mushroom icon template is based on Jinja2. See this example:

{% if is_state('light.livingroom', 'on') %}
  blue
{% elif is_state('light.livingroom', 'off') %}
  grey
{% else %}
  green
{% endif %}

If you want to refer to a attribute you can do it as such:

{% if is_state_attr('climate.airco', 'ac_mode', 'cooling') %}
  blue
{% elif is_state_attr('climate.airco', 'ac_mode', 'heating') %}
  red
{% else %}
  grey
{% endif %}
3

Thx alot for your answer
So i was missing the {} and %, but why is it sometimes with them and sometimes without?
Cause my posted code up there works and it does not have the {%%}

4

The difference between using {%%} and {{}} in Jinja2 templates depends on what you’re trying to do:

  • {% %} is used for statements, such as if, for, set, and other control structures.
  • {{ }} is used for expressions that you want to evaluate and include in the output, like variable values or inline calculations.

In your posted code:

{{ 'light-blue' if states('climate.ac_livingroom') == 'cool' else 'dark-grey' }}

You’re using {{ }} because it’s an expression that evaluates to a single value.

When you have multiple conditions or more complex logic, you use {% %} for control structures:

{% set ac_mode = state_attr('climate.ac_livingroom', 'ac_mode') %}
{% if ac_mode == 'cooling' %}
  light-blue
{% elif ac_mode == 'heating' %}
  red
{% else %}
  grey
{% endif %}

Here, {% %} is used to control the flow and {% set %} is used to define a variable.

1 Like
5

Thx alot…
It works now