Hallo zusammen
Das Bild zeigt ein Teil meines Dashboard. Nun hätte ich gerne das Temp-Icon je nach zustand eingefärbt. Unter 19 Grad blau, 19-23 Grad grün und darüber rot.
Geht das oder wie geht das?
Edit: Das ist die ganz normale Kachel von HA
Grüsse Rush
Ja, mit der HACS Integration “card-mod”.
Hier ein paar Anleitungen für unterschiedliche Karten: 🔹 Card-mod - Add css styles to any lovelace card - #1396 by Ildar_Gabdullin - Dashboards & Frontend - Home Assistant Community
Es gäbe noch einen anderen Weg, obwohl ich auch den von @Alex nehmen würde.
Du könntest dir 3 Bedingungen-Karten anlegen und in der Bedingung den nummerische Zustand des Temp abfragen. Je nach Zustand kannst du in der Kachel die Farbe bestimmen. Und wenn sich die Bedingungen nicht überschneiden, wird immer nur eine Karte angezeigt.
Habe das auch umgesetzt.
Packe das einfach mit card_mod unter den Sensor (vorher in Hacks natürlich laden):
card_mod:
style:
hui-generic-entity-row:
$: |
@keyframes blinker { 50% { opacity: 0; } }
state-badge {
{% if states(config.entity) | int >= 100 %}
animation: blinker 1s linear infinite;
{% endif %}
}
.text-content:not(.info) {
color:
{% if states(config.entity) | int >= 60 %}
#ffcc03
{% elif states(config.entity) | int >= 100 %}
#ff4040
{% endif %}
;
}
:host {
{% if states(config.entity) | int >= 60 %}
--card-mod-icon: mdi:weather-windy;
--card-mod-icon-color: #ffcc03;
{% elif states(config.entity) | int >= 100 %}
--card-mod-icon: mdi:weather-windy;
--card-mod-icon-color: #ff4040;
{% else %}
--card-mod-icon: mdi:weather-windy;
--card-mod-icon-color:white;
{% endif %}
}
Du kannst alles anpassen:
Oben: Soll das Icon blinken ab einem bestimmten Wert?
Mitte: Schriftzug Farbe
Unten: Icon-Farbe und ggfs. anderes Icon
Hallo alle zusammen
Schon mal ein riesiges Dankeschön!
Bis jetzt verstehe ich Bahnhof, werde mich aber heute mal ein bisschen durchtesten…
Trial and Error… wenn ihr wisst was ich meine. 
Noch gleich eine Frage dazu… Kann man so auch ganze Kachel einfarben, wann geschlossen grün, wann offen rot?
Müsste so nicht etwas passieren?
type: tile
entity: sensor.temp_aqara_kueche_temperature
name: Küche
card_mod:
style: |
.icon {
{% if states(config.entity)|float(0) >= 19.0 }
--tile-color:var(--green-color);
@Maddin84
Wir würde den der code bei Celsius aussehen anstatt wenn der Wert % ist?
Hab dein Code auch mit 19.0 C getestet ist aber nichts passiert. 
Hi,
Denke du willst sowas ? (RGBA Farben gehen auch)
card_mod:
style: |
ha-card {
{% if states(config.entity) | float > 60 %}
--tile-color: green !important;
{% else %}
--tile-color: red !important;
{% endif %}
}
Weitere Kachel Style Codes
ich hoffe ich habe damit einige Fragen abgedeckt?
Shape Färben:
card_mod:
style:
.icon-container .icon$: |
.shape {
{% if is_state(config.entity, 'on') %}
background: rgba(0,255,0,0.15) !important;
{% else %}
background: rgba(255,0,0,0.15) !important;
{% endif %}
}
Icon Färben ON/OFF:
card_mod:
style: |
.icon {
{% if is_state(config.entity, 'on') %}
--tile-color: green !important;
{% else %}
--tile-color: grey !important;
{% endif %}
}
Icon Färben Numerisch:
card_mod:
style:
.icon-container .icon$: |
.shape {
{% if states(config.entity) | float > 60 %}
background: rgba(0,255,0,0.15) !important;
{% else %}
background: rgba(255,0,0,0.15) !important;
{% endif %}
}
Icon Färben Numerisch Nr.2 (Alles bis 60 Grün, alles bis 70 Gelb, darüber Rot (als Beispiel):
card_mod:
style: |
ha-card {
{% if states(config.entity) | float > 70 %}
--tile-color: red !important;
{% elif states(config.entity) | float > 60 %}
--tile-color: yellow !important;
{% else %}
--tile-color: green !important;
{% endif %}
}
Icon wechseln & Färben Numerisch:
card_mod:
style: |
ha-card {
{% if states(config.entity) | float > 60 %}
--card-mod-icon: mdi:sofa;
--tile-color: green !important;
{% else %}
--card-mod-icon: mdi:door;
--tile-color: red !important;
{% endif %}
}
Secondary mit 1x Entität:
card_mod:
style:
ha-tile-info$: |
.secondary {
visibility: hidden;
}
.secondary:before {
visibility: visible;
content: '{{ states('sensor.steckdose_power') | round(0) }} W'
}
Secondary mit 2x Entitäten:
card_mod:
style:
ha-tile-info$: |
.secondary {
visibility: hidden;
}
.secondary:before {
visibility: visible;
content: '{{ states('sensor.temperatur') | round(1) }} °C - {{ states('sensor.luftfeuchtigkeit') | round(0) }} %'
}
Hi @RaptorX
Mit diesem Code habe ich den erste Schritt erreicht:
card_mod:
style:
.icon-container .icon$: |
.shape {
{% if states(config.entity) | float < 18.9 %}
background: blue !important;
{% else %}
background: green !important;
{% endif %}
}
Alles unter 19 ist blauf darüber grün 
wenn ich jetzt noch ab 23 ein rotes icon habe dann 
Die Türkontakte habe ich mit diesem Code gelöst:
card_mod:
style:
.icon {
{% if is_state(config.entity, 'on') %}
--tile-color:green !important;
{% else %}
--tile-color:red !important;
{% endif %}
}
Musste aber aus deinem Beispiel noch die Leerschläge zwischen dem : und der Farbe löschen. 
Hi, Leerschläge = Leerzeichen?
Meinst du das? das ist so korrekt.
--tile-color:LEERZEICHENred !important;
Spiel mit den Wert “18.9” herum, dann siehst du eine veränderung (im Editor siehst du es bei einer Kachel Karte NICHT direkt dh. Speichern und evtl. F5 Drücken!)
card_mod:
style:
.icon-container .icon$:
|-
.shape {
{% if states(config.entity) | float > 23 %}
background: red !important;
{% elif states(config.entity) | float < 19 %}
background: blue !important;
{% else %}
background: green !important;
{% endif %}
}
Nicht getestet, erstellt hat es chatgpt
--tile-color:LEERZEICHENred !important;
So bekam ich eine Fehlermeldung: bad indentation of a mapping entry (13:25)
--tile-color:red !important;
So nicht…
unter 19.0 (18.9 war ein test) ist es blau und ab 19.1 grün…
und ich möchte noch über 23 rot…
Bräuchte wahrscheinlich oder zimlich sicher noch eine zeile.
Ups, habe wohl beim Forum Editieren das “|” gekillt, sorry!
JETZT sollte es gehen
card_mod:
style: |
.icon {
{% if is_state(config.entity, 'on') %}
--tile-color: green !important;
{% else %}
--tile-color: red !important;
{% endif %}
}
Alter Fehlercode zum vergleich:
card_mod:
style:
.icon {
{% if is_state(config.entity, 'on') %}
--tile-color: green !important;
{% else %}
--tile-color: red !important;
{% endif %}
}
Super!
Jetzt zerschiesst es mir auch den Code nicht mehr.
Super,
Alles bis 60 Grün, alles bis 70 Gelb, darüber Rot (als Beispiel)
card_mod:
style: |
ha-card {
{% if states(config.entity) | float > 70 %}
--tile-color: red !important;
{% elif states(config.entity) | float > 60 %}
--tile-color: yellow !important;
{% else %}
--tile-color: green !important;
{% endif %}
}
Ich hatte bereits die Lösung im Test als du deine gepostet hattest.
type: tile
entity: sensor.temp_aqara_zimmer_4_temperature
name: Bad2
show_entity_picture: false
vertical: false
tap_action:
action: more-info
card_mod:
style:
.icon-container .icon$: |
.shape {
{% if states(config.entity) | float > 23 %}
background: red !important;
{% elif states(config.entity) | float <19 %}
background: blue !important;
{% else %}
background: green !important;
{% endif %}
}
Macht bis jetzt was es soll.
Danke allen!
Ist schon nahe an dem was ich wollte.
Auf einen Blick sehen was ein oder ausgeschalten ist.
Jetzt noch die unnötigen Informationen entfernen und dann noch eine Version fürs Handy!
Hallo zusammen,
ich wollte das Thema hier nochmal aufgreifen…
Bei mir funktioniert das Einfärben der Icons nach einem Update nicht mehr. Ist das bei euch auch so?
Gibt es eine Lösung bzw. nun ein anderes Vorgehen wie man diese wieder einfärben kann?
Wie hast du das färben der Icons umgesetzt? Wenn du es mit card_mod gemacht hast, hast du darauf geachtet, dass du immer card_mod davor geschrieben hast?
card_mod:
style:
....
Das wurde irgendwann als zwingend vorgeschrieben und war früher nicht so.
Sieht bei mir so aus:
type: tile
entity: binary_sensor.turkontakt_terrasse_contact
name: Terrassentür
icon: mdi:door
card_mod:
style: |
.icon {
{% if is_state(config.entity, 'off') %}
--tile-color: green !important;
{% else %}
--tile-color: red !important;
{% endif %}
}
Und so die Karte:
Hier gehts bspw. um den Türkontakt Terrasse aber das betrifft auch alle anderen Karten. Die Temperatur und Luftfeuchte sind nur einfarbig ohne Änderung
card_mod läuft aber noch bzw. ist in HACS noch eingebunden?
Ja ist alles noch da sowie vorher auch….
Ich versteh das absolut nicht
Ich habs herausgefunden… man muss das .icon in ha-card ändern…
Vorher:
Nachher:
type: tile
entity: binary_sensor.turkontakt_terrasse_contact
name: Terrassentür
icon: mdi:door
card_mod:
style: |
ha-card {
{% if is_state(config.entity, 'off') %}
--tile-color: green !important;
{% else %}
--tile-color: red !important;
{% endif %}
}
Hallo zusammen
entschuldigt falls die Frage doof ist, aber ich beschäftige mich erst seit ein paar Wochen mit HomeAssistant. Ich verwende ungern Codeteile per Copy und Paste ohne es zu verstehen.
Konkret geht es mir um diesen Codeteil:
card_mod:
style:
.icon-container .icon$: |
.shape {
{% if is_state(config.entity, 'on') %}
Wo finde ich in einer Dokumentation was “.icon-container”, “.icon$” bzw “.shape” bedeutet.
Vielleicht kann mir jemand einen Schubs in die richtige Richtung geben bevor ich mir einen Wolf suche.
MfG Chris