[SOLVED] Icon color on themes (open window)

[paolo2628]

New way to get It working with december 23 home assistant version:

card_mod:
  style: |
    ha-card {
      --tile-color: green !important;
    }

Ciao belli

[Ben_Aus (Ben)]

I am also after a solution for this? does anyone know how to get this to work with the current HA version?

I have an entity sensor.lumi_lumi_weather_master_temperature_3 and I want this to be red above 26C, Green above 21c (but below 26C) and then blue below 21c. how would I do this?

thanks

[NCO3]

I just changed from this

card_mod:
   style: |
      .tile {

to this:

card_mod:
   style: |
      .icon {

[CChris (Christoph)]

yes, that does work, too - BUT i just did a test with the ha-card { } css provided above, and it seems that this will also change the cards background color accordingly… so it is the better option

[Ben_Aus (Ben)]

Thanks

I cant seem to get mine to change colour, have I got something wrong

type: tile
entity: sensor.lumi_lumi_weather_master_temperature_3
card_mod:
style: |
.icon {
{% if states(config.entity)|float(0) > 24.9 %}
–icon-color: red;
{% elif states(config.entity)|float(0) > 22.9 %}
–icon-color: orange;
{% elif states(config.entity)|float(0) > 18.9 %}
–icon-color: green;
{% else %}
–icon-color: blue;
{% endif %}
}

[NCO3]

I my case this works - please note the --tile-color instead of --icon-color

card_mod:
    style: |
      .icon {
        {% if states(config.entity)|float(0) > 64.9 %}
          --tile-color: red;
        {% elif states(config.entity)|float(0) > 61.9 %}
          --tile-color: orange;
        {% elif states(config.entity)|float(0) > 39.9 %}  
          --tile-color: green;
        {% else %}  
          --tile-color: darkblue;
        {% endif %}  
            }

@CChris

so it is the better option

Which one? I am not quite sure which you mean.

[CChris (Christoph)]

sorry… the option with ha-card is the better option, because it does also affect the tile card color on mouse over…

[NCO3]

@CChris

ha-card is the better option

Thank you.
That makes sense and works nicely.

[jdukat (Jarosław Dukat)]

Consider using mushroom template card, much easier to set up and has all the features you need.

[Hennyr (Henny Ribbink)]

@tom_l

       card_mod:
          style: |
            .tile {
              {% if states(config.entity)|float(0) > 24.9 %}
                --tile-color: var(--rgb-red-color);
              {% elif states(config.entity)|float(0) > 22.9 %}
                --tile-color: var(--rgb-yellow-color);
              {% elif states(config.entity)|float(0) > 17.9 %}  
                --tile-color: var(--rgb-green-color);
              {% else %}  
                --tile-color: var(--rgb-blue-color);
              {% endif %}  
            }

I have tried:

type: tile
entity: sensor.inverter_henny_2000ns_schuur
name: Schuur NU
icon: mdi:weather-sunny-alert
show_entity_picture: true
hide_state: false
card_mod:
  style: |
    .tile {
       {% if states(config.entity.Pac)|float(0) > 0 %}
        --tile-color: var(--rgb-yellow-color);
        {% endif %}  
        }

and

type: tile
entity: sensor.inverter_henny_2000ns_schuur
name: Schuur NU
icon: mdi:weather-sunny-alert
show_entity_picture: true
hide_state: false
card_mod:
  style: |
    .tile {
       {% if states(config.entity)|float(0) > 0 %}
        --tile-color: var(--rgb-yellow-color);
        {% endif %}  
        }

Both reading 90 watts but no change of icon or tile color.
Reading all contributions, it should work…!!!

[Ildar_Gabdullin]

@Hennyr

states(config.entity.Pac)

What is “Pac”?
If an attribute - then should be “state_attr(config.entity,‘name_of_attr’)”.

As for other code - suggest to ask in the main card-mod thread, this code seems to be toooo old.

[NCO3]

This works nicely in my case:

type: tile
entity: sensor.tibber_nco_monatlicher_nettoverbrauch
name: Strom (Monat)
tap_action:
  action: more-info
icon_tap_action:
  action: more-info
card_mod:
  style: |
    ha-card {
      {% if states(config.entity)|float(0) > 300 %}
        --tile-color: red !important;
      {% elif states(config.entity)|float(0) > 150 %}
        --tile-color: orange !important;
      {% elif states(config.entity)|float(0) > 0 %}  
        --tile-color: green !important;
      {% else %}  
        --tile-color: grey;
      {% endif %}  
    }

[LiQuid_cOOled]

A little cleaner method

card_mod:
  style: |
    ha-card {
      --tile-color:
        {% set state = states(config.entity)|int(default=0) %}
        {% if state > 300 %} red !important
        {% elif state > 150 %} orange !important
        {% elif state > 0 %} green !important
        {% else %} grey
        {% endif %}
        }

[Ildar_Gabdullin]

A bit cleanerER method

card_mod:
  style: |
    ha-card {
      qwe:
        {%- set abc = ... -%}
        {%- if ... -%} xxx
        {%- ... -%} zzz
        {%- ... -%} yyy
        {%- else -%} aaa
        {%- endif %}
        }

Only a matter of presentation in DOM.

[Mariusthvdb (Marius)]

@LiQuid_cOOled

card_mod:
  style: |
    ha-card {
      --tile-color:
        {% set state = states(config.entity)|int(default=0) %}
        {% if state > 300 %} red !important
        {% elif state > 150 %} orange !important
        {% elif state > 0 %} green !important
        {% else %} grey
        {% endif %}
        }

cleanest:

card_mod:
  style: |
    ha-card {
      --tile-color:
        {%- set state = states(config.entity)|int(default=0) %}
        {%- if state > 300 %} red
        {%- elif state > 150 %} orange
        {%- elif state > 0 %} green
        {%- else %} grey
        {%- endif %} !important;
    }

[LiQuid_cOOled]

I think your post should be directed at @Ildar_Gabdullin …

I already took his advice

[Hennyr (Henny Ribbink)]

You all, thanks ‘ha-card’ is working fine.