Thermostat Card umgefärben im HVAC Mode mit Card-Mod

Einleitung
Die Anpassung von Benutzeroberflächen in Smart-Home-Anwendungen ist entscheidend für eine benutzerfreundliche und ansprechende Erfahrung. Insbesondere die Thermostat Card in Home Assistant kann durch die Verwendung von Card-Mod individuell gestaltet werden. Dieser Artikel beschreibt, wie du die Icons und Buttons der Thermostat Card umfärben kannst, um sie an deine persönlichen Vorlieben oder das Design deines Smart Homes anzupassen.

Problem
Ein Benutzer hat Schwierigkeiten, die Icons und Buttons der Thermostat Card in Home Assistant mithilfe von Card-Mod zu färben. Die Frage zielt darauf ab, wie diese Anpassungen vorgenommen werden können, um die visuelle Darstellung der Thermostat Card zu verbessern.

Lösung
Die Lösung besteht darin, die Card-Mod-Funktion zu nutzen, um CSS-Variablen zu definieren, die die Farben der Thermostat Card steuern. Mit Card-Mod kannst du das Aussehen der Card anpassen, indem du CSS-Stile direkt in die Konfiguration einfügst. Hier ist der erforderliche Code, um die gewünschten Änderungen vorzunehmen:

card_mod:
  style: |
    :host {      
      --state-climate-auto-color: red !important;
      --primary-text-color: grey !important;
      --icon-primary-color: red !important;
    }

Dieser Code definiert die Farben für den automatischen Klimazustand, den primären Text und die Icons. Um diese Anpassungen in deiner Thermostat Card zu integrieren, kannst du den folgenden Code verwenden:

type: thermostat
entity: climate.wandthermostat_jan_2
show_current_as_primary: false
features:
  - style: icons
    type: climate-hvac-modes
name: " "
card_mod:
  style: |
    :host {
      --state-climate-auto-color: red !important;
      --primary-text-color: grey !important;
      --icon-primary-color: red !important;
    }

Schritte zur Umsetzung
1. Stelle sicher, dass Card-Mod in deiner Home Assistant-Installation aktiviert ist.
2. Füge den oben genannten Code in die Konfiguration deiner Thermostat Card ein.
3. Speichere die Änderungen und lade die Benutzeroberfläche neu, um die Anpassungen zu sehen.

Hintergrundwissen
Card-Mod ist eine Erweiterung für Home Assistant, die es ermöglicht, das Aussehen von Karten durch CSS-Anpassungen zu verändern. CSS-Variablen sind Platzhalter für Werte, die in verschiedenen Teilen des Codes verwendet werden können. In diesem Fall werden sie verwendet, um die Farben der Thermostat Card zu steuern.

Typische Fehler, die bei der Verwendung von Card-Mod auftreten können, sind:
- Falsche Einrückungen im YAML-Code, die zu Syntaxfehlern führen.
- Das Fehlen von !important, was dazu führen kann, dass die Standardstile nicht überschrieben werden.

Zusätzliche Infos

Hinweise & Best Practices
- Teste die Änderungen in einer Entwicklungsumgebung, bevor du sie in einer produktiven Umgebung anwendest.
- Achte darauf, dass die Farben gut lesbar sind und einen ausreichenden Kontrast bieten.
- Halte die CSS-Anpassungen dokumentiert, um zukünftige Änderungen zu erleichtern.