Entdecke, wie du mit Home Assistant und Card-Mod dein Smart Home Dashboard individualisierst! Dieses Tutorial führt dich durch die Anpassung deiner Oberfläche an deine Bedürfnisse, von Geräten bis hin zum Erscheinungsbild. Das Video zeigt dir Schritt für Schritt die Verwendung der HACS Erweiterung Card-Mod in Kombination mit Templates um das Beste aus deinem Setup herauszuholen.
Links: Card-Mod3 : https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins
Wie du HACS installierst wird dir in diesem Video erklärt:
YAML Code:
Farbe Namen:
type: entities
entities:
- entity: input_boolean.schalter1
card_mod:
style: |
:host {
color: red;
}
- entity: input_boolean.schalter1
card_mod:
style: |
:host {
color: green;
}
- entity: input_boolean.schalter1
title: Farbe von Entitätsnamen
Farbe Icons:
type: entities
entities:
- entity: input_boolean.schalter1
card_mod:
style: |
:host {
--card-mod-icon-color: red;
}
- entity: input_boolean.schalter1
card_mod:
style: |
:host {
--card-mod-icon-color: blue;
color: yellow
}
- entity: input_boolean.schalter1
title: Icon Farbe
card_mod:
style: |
ha-card {
background: gray;
}
Farbe Hintergrund:
type: entities
entities:
- entity: input_boolean.schalter1
- entity: input_boolean.schalter1
- entity: input_boolean.schalter1
title: Background Color
card_mod:
style: |
ha-card {
background: orange;
}
Farbe , Icon, Schriftfarbe nach Zustand:
type: entities
entities:
- entity: input_boolean.schalter1
card_mod:
style: |
:host {
{% if is_state('input_boolean.schalter1', 'on') %}
--card-mod-icon: mdi:light-switch;
--card-mod-icon-color: red;
{% else %}
--card-mod-icon: mdi:garage;
--card-mod-icon-color: green;
{% endif %}
}
- entity: input_boolean.schalter1
card_mod:
style: |
:host {
{% if is_state('input_boolean.schalter1', 'on') %}
--card-mod-icon: mdi:light-switch;
--card-mod-icon-color: red;
{% else %}
--card-mod-icon: mdi:light-switch-off;
--card-mod-icon-color: green;
{% endif %}
}
- entity: input_boolean.schalter1
title: Icon, Schrift, Background
Farbe, Icon, Schriftfarbe nach numerischen Zustand:
type: entities
entities:
- entity: input_number.number1
card_mod:
style: |
:host { {% if states('input_number.number1') | int <=50 %}
background: green;
--card-mod-icon: mdi:light-switch;
--card-mod-icon-color: orange
{% elif states('input_number.number1') | int >50 and states('input_number.number1') | int < 80 %}
background: yellow;
--card-mod-icon: mdi:garage-open;
{% elif states('input_number.number1') | int >= 80 %}
background: red;
{% endif %}
}
Für eine “Tile” Card müssen ein paar andere Variablen verwendet werden. An dieser Stelle herzlichen Dank an @chrannen für diese super Ergänzung 💙
type: tile
entity: ENTITÄT
card_mod:
style: |
ha-card {
{% if is_state("ENTITÄT", "on") %}
--tile-color:crimson !important;
--card-mod-icon: mdi:arrow-left-bold-box;
{% else %}
--tile-color:darkgreen !important;
--card-mod-icon: mdi:arrow-right-bold-box;
{% endif %}
}
die wichtigsten Unterschiede sind:
– statt “:host” lautet der style “ha-card”
– hinter jede farbe muss der zusatz “!important;”
– statt “card-mod-icon-color” muss “tile-color” geschrieben werden