Bist du auch gelangweilt von den immer gleichen, grauen Icons in deinem Home Assistant Dashboard? In diesem Video zeige ich dir, wie du deinem Dashboard einen individuellen Look verpasst und die Farbe deiner Icons ganz nach deinen WĂĽnschen anpasst!
== Zum Blog-Beitrag mit noch mehr Infos =⇒
Vielen Dank fĂĽr euren andauernden Support hier in der Community & auf YouTube 
Für ganz verrückte, gedimmte und/oder bunte Lichter überschreiben geht auch, ich fand es nämlich hässlich 
- entity: light.ku_light_left
name: Licht Links
icon: mdi:dome-light
secondary_info: brightness
card_mod:
style:
hui-generic-entity-row:
$:
state-badge:
$: |
ha-state-icon
{
filter: brightness(100%) !important;
{% if is_state("light.ku_light_left", "on") %}
color: var(--accent-color) !important;
{% endif %}
}
Vielen Dank fĂĽrs Teilen @der_Micro
Ich wollte gerne, dass etwas “passiert”, wenn der Mauszeiger über dem Button (hover) steht.
type: custom:mushroom-template-card
entity: switch.zb_steckdose_bambu
tap_action:
action: toggle
icon: |-
{% if states( entity ) == 'on' %}
mdi:power-plug
{% else %}
mdi:power-plug-off
{% endif %}
icon_color: |-
{% if states( entity ) == 'on' %}
red
{% else %}
green
{% endif %}
primary: |-
{% if states( entity ) == 'on' %}
Aus
{% else %}
Drucker
{% endif %}
layout: vertical
card_mod:
style: |
{% set color_icon = "blue" %}
{% if is_state(config.entity, 'on') %}
{% set color_icon = "amber" %}
ha-state-icon {
color: rgb(255, 193, 7);
}
mushroom-shape-icon {
--shape-color: rgba( 255, 193, 7,.2) !important;
}
{% else %}
ha-state-icon {
color: rgb( 33, 150, 243);
}
mushroom-shape-icon {
--shape-color: rgba( 33, 150, 243,.2) !important;
}
{% endif %}
/* Add subtle color on hover */
ha-card:hover {
background: color-mix(in srgb, var(--{{ color_icon }}-color) 25%, var(--card-background-color)) !important;
}
Leider neige ich immer noch dazu meine Fragen unter den Youtube-Videos von Simon zu platzieren. Macht natĂĽrlich keinen Sinn.
Ich versuche es hier noch mal und hoffe auf eure Hilfe.
Die Farben der Icons sind das eine, dass klappt perfekt.
Aber wie hast du im Video als Bsp. in der Kachel-Karte (Jalousie) die verschiedenen Icons für die Zustände “geöffnet” bzw. “geschlossen” eingestellt? Es ist ein weiteres Icon für den Zeitraum der Jalousiefahrt hinterlegt.
Gibt es dafĂĽr eine Doku oder sogar ein Video?
Danke fĂĽr euren Support und viele GrĂĽsse
Marcel
Ist bei den MUSHROOM-Karten ganz einfach…
{% if is_state( entity, 'off') %}
mdi:lightbulb
{% else %}
mdi:lightbulb-on
{% endif %}
Hallo Roberto, da hast du vollkommen recht.
Aber ich möchte die tolle optik der Kachel-Karte nicht verlieren:
Im Prinzip sollte das hier funktionieren, Du musst halt die ICONS und FARBEN anpassen.
Bei mir funktioniert das. Du musst natĂĽrlich die CARD_MOD aus HACS installiert haben!
So habe ich es jetzt bei mir.
tcard_mod:
style: |
{% set color_icon = "blue" %}
{% if is_state(config.entity, 'open') %}
{% set color_icon = "amber" %}
ha-state-icon {
color: rgb(255, 193, 7);
}
ha-state-icon {
--card-mod-icon: mdi:window-shutter-open
}
mushroom-shape-icon {
--shape-color: rgba( 255, 193, 7,.2) !important;
}
{% else %}
ha-state-icon {
color: rgb( 33, 150, 243);
}
ha-state-icon {
--card-mod-icon: mdi:window-shutter;
}
mushroom-shape-icon {
--shape-color: rgba( 33, 150, 243,.2) !important;
}
{% endif %}
/* Add subtle color on hover */
ha-card:hover {
background: color-mix(in srgb, var(--{{ color_icon }}-color) 25%, var(--card-background-color)) !important;
}
Kann weg, wenn sich nicht die ganze Karte einfärben soll bei HOVER.
/* Add subtle color on hover */
ha-card:hover {
background: color-mix(in srgb, var(--{{ color_icon }}-color) 25%, var(--card-background-color)) !important;
}
Gut, dass Du gefragt hast. Hatte ich auf dem Schirm, war aber noch nicht so weit. Jetzt schon… 
Falls jemand Button-Cards nutzt, geht das in meinen Augen sogar noch nen Tick einfacher, bzw. insb. besser lesbar
Simples Beispiel fĂĽr Fenster auf/zu mit unterschiedlichen Farben/Icons:
type: custom:button-card
entity: binary_sensor.xyz
state:
- value: "off"
icon: mdi:window-closed-variant
color: green
- value: "on"
icon: mdi:window-open-variant
color: red
name: " "
Oder in Kombination mit einem anzuzeigendem Label bei Überschreitung eines Schwellwerts der Entität
type: custom:button-card
entity: sensor.power-wama
color: auto
icon: mdi:washing-machine
name: " "
show_state: false
show_label: true
state:
- value: 0
- value: 5
operator: ">="
color: orange
spin: true
label: |
[[[
return states['sensor.s_power-wama'].state + ' W'
]]]
Ich bin wohl zu blöd 
Kann mir jemand sagen was ich hier falsch mache?
Die geschlossenen Rolladen sollte GRĂśN sein, sind aber immer noch grau .
Habe einen Ordner “themse” angelegt in dem Ordner eine Datei.yaml und dann die Daten für Shutter und lights. So wie im Video von Simon.
Bin erst seit 2 Monaten dabei. Meiner Meinung nach sieht es gut aus
GruĂź
Michael
