Wer das Aussehen seines Home Assistant Dashboards individuell anpassen möchte, stößt schnell an die Grenzen der Standardoptionen. Mit der Integration card-mod lassen sich Karten im Lovelace-Interface gezielt und flexibel stylen, von Farben bis zu komplexen CSS-Anpassungen. Besonders für Nutzer, die mehr Kontrolle über das Design suchen, eröffnet card-mod neue Möglichkeiten, auch im Umgang mit dem sogenannten Shadow DOM.
Warum card-mod für Home Assistant sinnvoll ist
Das Standard-Design von Home Assistant bietet eine solide Grundlage, lässt aber bei der individuellen Gestaltung oft Wünsche offen. Viele Nutzer möchten beispielsweise Farben, Abstände oder Schriftarten gezielt anpassen. Hier setzt die Erweiterung card-mod an: Sie erweitert die Styling-Möglichkeiten für Lovelace-Karten deutlich und erlaubt es, nahezu jedes Element im Dashboard mit CSS zu gestalten.
Ein weiterer Vorteil: card-mod ermöglicht den Zugriff auf das Shadow DOM, das viele Home Assistant Karten zur Strukturierung ihrer Inhalte nutzen. Damit lassen sich auch tief verschachtelte Elemente anpassen, die mit normalen Theme-Optionen nicht erreichbar wären. Das macht card-mod besonders für fortgeschrittene Anwender interessant, die Wert auf ein einheitliches und individuelles Erscheinungsbild legen.
Installation und Anwendung von card-mod
Die Installation von card-mod erfolgt am einfachsten über den Home Assistant Community Store (HACS). Nach der Suche nach 'card-mod' und der Installation muss das Modul in der configuration.yaml eingebunden werden. Wichtig ist, den Pfad zur card-mod JavaScript-Datei korrekt anzugeben, wie im offiziellen Repository beschrieben.
Nach dem Neustart von Home Assistant steht card-mod zur Verfügung. Über die card_mod-Option in der jeweiligen Lovelace-Karte können CSS-Anpassungen direkt im YAML-Editor hinterlegt werden. Die Dokumentation im Repository bietet zahlreiche Beispiele, wie Styles für verschiedene Kartentypen und das Shadow DOM umgesetzt werden können. So lassen sich etwa Hintergrundfarben, Rahmen oder Schriftgrößen gezielt anpassen.
