Card-Mod 3: Hintergrundfarbe und Schriftgröße in einer Karte kombinieren

Einleitung
Die Anpassung von Karten in Smart-Home-Anwendungen ist entscheidend für die Benutzererfahrung. Durch die Verwendung von Card-Mod 3 können Benutzer das Aussehen und Verhalten von Karten in Home Assistant anpassen. In diesem Artikel wird erläutert, wie man die Schriftgröße und die Hintergrundfarbe einer Karte basierend auf dem Zustand einer Entität kombiniert.

Problem
Ein Benutzer möchte zwei verschiedene Stile in einer Karte kombinieren: Einerseits soll die Schriftgröße von Texten angepasst werden, andererseits soll die Hintergrundfarbe der Karte je nach Zustand einer Entität variieren. Trotz mehrerer Versuche konnte der Benutzer die beiden Stile nicht erfolgreich in einer einzigen Karte zusammenführen.

Lösung
Um die beiden Stile zu kombinieren, muss die Syntax des Card-Mods entsprechend angepasst werden. Der folgende Code zeigt, wie die Schriftgröße und die Hintergrundfarbe in einer Karte zusammengeführt werden können:

type: tile
entity: XXXXX
name: YYYYY
card_mod:
  style: |
    ha-card {
      {% if is_state("XXXXXX", "on") %}
        background: green;         
      {% else %}  
        background: red;             
      {% endif %}  
      --card-primary-font-size: 18px;
      --card-secondary-font-size: 22px;
      --card-primary-line-height: 24px;
      --card-primary-color: red;
      --card-secondary-color: red;
    }

In diesem Beispiel wird die Hintergrundfarbe der Karte basierend auf dem Zustand der Entität (XXXXXX) gesetzt. Gleichzeitig werden die Schriftgrößen für die primären und sekundären Texte angepasst.

Schritte zur Umsetzung
1. Öffne den visuellen Editor in Home Assistant.
2. Erstelle eine neue Karte vom Typ "tile".
3. Füge die Entität und den Namen der Karte hinzu.
4. Kopiere den oben angegebenen Code in das Feld für den Card-Mod.
5. Ersetze XXXXX und XXXXXX durch die entsprechenden Entitätsnamen.
6. Speichere die Änderungen und überprüfe die Darstellung der Karte.

Hintergrundwissen
Card-Mod ist ein leistungsstarkes Tool in Home Assistant, das es ermöglicht, das Aussehen von Karten durch CSS-ähnliche Stile anzupassen. Die Verwendung von Variablen wie --card-primary-font-size ermöglicht eine einfache Anpassung der Schriftgrößen. Die Bedingung {% if is_state(...) %} erlaubt es, dynamische Stile basierend auf dem Zustand von Entitäten zu definieren.

Zusätzliche Infos

Hinweise & Best Practices
- Achte darauf, die Entitätsnamen korrekt zu verwenden, um Fehler zu vermeiden.
- Teste die Karte nach jeder Änderung, um sicherzustellen, dass die Stile wie gewünscht angewendet werden.
- Nutze die Developer Tools in Home Assistant, um CSS-Änderungen in Echtzeit zu testen, bevor du sie in den Card-Mod überträgst.
- Halte die Syntax sauber und gut strukturiert, um die Lesbarkeit und Wartbarkeit des Codes zu gewährleisten.