Hi Friends. I used this mod and all was ok but with the january home assistant update It stopped to works; now the icon are black. Any idea?
I found a solution: the issue Is this string:
–tile-color: var(–rgb-red-color);
Now it works in this way:
–tile-color: red;
Have a good day.
Paolo
Just so you know, --tile-color: red; uses CSS red which is different than the Home Assistant red color.
If you want to use the same color as the old --rgb-red-color, you should use --tile-color: var(--red-color);
Hi guys,
thanks for all your responses.
I use now the tile approach for e.g. Temperatures / doors / presence like suggested by @tom_l with the modification of @ModMonster
type: tile
entity: sensor.motion_sensor_air_temperature_2
name: Flur DG
tap_action:
action: more-info
icon_tap_action:
action: navigate
navigation_path: /lovelace-warny/dg
card_mod:
style: |
.tile {
{% if states(config.entity)|float(0) > 24.9 %}
--tile-color: red;
{% elif states(config.entity)|float(0) > 22.9 %}
--tile-color: orange;
{% elif states(config.entity)|float(0) > 18.9 %}
--tile-color: green;
{% else %}
--tile-color: blue;
{% endif %}
}
1 Like
Friends since december update this mod stopped to work: i’m not more able to change the tile color.
any idea?
can anyone try please?
thank you very much
New way to get It working with december 23 home assistant version:
card_mod:
style: |
ha-card {
--tile-color: green !important;
}
Ciao belli
1 Like
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
I just changed from this
card_mod:
style: |
.tile {
to this:
card_mod:
style: |
.icon {
1 Like
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 
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 %}
}
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 %}
}
Which one? I am not quite sure which you mean.
sorry… the option with ha-card is the better option, because it does also affect the tile card color on mouse over…
Thank you.
That makes sense and works nicely.
Consider using mushroom template card, much easier to set up and has all the features you need.
1 Like
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…!!!
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.
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 %}
}
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 %}
}
