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'
]]]