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.
Stand heute: card-mod bekommt seit März 2026 keine Updates mehr. Der Nachfolger heißt UIX, kommt vom selben Entwickler und übernimmt deine Styles: aus
card_mod:wirduix:. Wie der Umstieg Schritt für Schritt geht, zeige ich in UIX statt card-mod. Wie viele Stellen in deinem Dashboard betroffen sind, zeigt dir der card-mod zu UIX Check. Du fügst deinen Code ein und kopierst die umgestellte Fassung mit einem Klick.
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 Marketplace in Home Assistant (früher der Home Assistant Community Store, kurz HACS). Das Video zeigt noch die alte HACS-Oberfläche. Im Marketplace suchst du nach 'card-mod' und installierst es. Der Marketplace legt Dashboard-Karten im Ordner www/community/ ab und trägt sie selbst als Dashboard-Ressource ein. Ein bestehender extra_module_url-Eintrag in der configuration.yaml, wie ihn das Video zeigt, funktioniert weiter. Details dazu stehen im offiziellen Repository.
Danach 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.
Weiterführende Inhalte
- UIX statt card-mod: So gelingt der Umstieg in HA: card-mod entfernen, UIX installieren und die Styles übernehmen
- card-mod zu UIX Check: findet jede card-mod-Stelle in deinem Dashboard und stellt sie auf
uix:um - Home Assistant Themes: iOS Dark Mode & Catppuccin im Überblick: Themes installieren und umschalten
