Home-Assistant-Dashboards können richtig gut aussehen. Der Weg dahin führt bei einzelnen Karten allerdings oft über YAML, CSS und card-mod. Wer damit wenig anfangen kann, verbringt schnell mehr Zeit mit Selektoren als mit dem eigentlichen Dashboard. Card-Mod Studio setzt genau dort an: Das Plugin ergänzt den Karteneditor um eine visuelle Oberfläche und erzeugt den passenden Stilcode im Hintergrund.

Im Video zeigt Sascha, wie sich Farben, Verläufe, Filter, Rahmen und Animationen direkt an einer Karte einstellen lassen. Besonders praktisch sind Bedingungen und Presets. Ein Design kann also auf den Zustand einer Entität reagieren und anschließend auf weitere Karten übertragen werden.

Stand der technischen Hinweise: 8. Oktober 2026. Das Video wurde am 20. September 2026 veröffentlicht. Seitdem ist Card-Mod Studio 0.10.0 erschienen; die Angaben zu Versionen, UIX und Einschränkungen wurden deshalb mit der aktuellen Projektdokumentation abgeglichen.

Was Card-Mod Studio eigentlich macht

Card-Mod Studio ist kein eigener Renderer für Dashboard-Karten. Es ist ein visueller Editor für Styles. Nach der Installation erscheint im normalen Karteneditor ein zusätzlicher Style-Button. Darüber öffnet sich ein Bedienfeld mit Reglern, Farbauswahl und Vorschau. Beim Speichern schreibt das Studio die Einstellungen in den card_mod:– beziehungsweise uix:-Block der Kartenkonfiguration.

Das ist ein wichtiger Unterschied: Card-Mod Studio erstellt den YAML- und CSS-Code, aber card-mod oder UIX wendet ihn an. Mindestens eine dieser beiden Engines muss deshalb installiert sein und funktionieren. Laut aktueller Projektdokumentation benötigt Card-Mod Studio außerdem Home Assistant 2025.9 oder neuer; Home Assistant 2026.2 oder neuer wird empfohlen.

card-mod oder UIX: Was ist aktuell die bessere Grundlage?

Mit card-mod lassen sich CSS-Styles in Home Assistant auf Karten und andere Teile des Frontends anwenden. Card-Mod Studio nimmt dir dabei einen großen Teil der Handarbeit ab. Die derzeit neueste card-mod-Veröffentlichung ist 4.2.1.

Parallel dazu gibt es UIX, eine Home-Assistant-Integration aus dem Umfeld des aktuellen card-mod-Maintainers. Card-Mod Studio unterstützt beide Wege. Ist UIX zusammen mit card-mod vorhanden, schreibt das Studio standardmäßig weiterhin card_mod:; UIX kann diesen Block als Fallback lesen. Ist nur UIX installiert, verwendet das Studio uix:. Bereits vorhandene Blöcke kann der Editor ebenfalls einlesen.

Für einen Wechsel zurück zu card-mod gibt es eine Stolperfalle: card-mod versteht keinen reinen uix:-Block. Card-Mod Studio warnt in diesem Fall und kann einfachen CSS-Inhalt nach card_mod: kopieren. UIX-eigene Makros oder Billets lassen sich nicht automatisch zurückübersetzen.

Die Dokumentation von Card-Mod Studio bezeichnet card-mod 4.2.1 inzwischen als faktisch kaum gepflegt und weist auf ein Problem mit bestimmten card-mod-*-yaml-Theme-Variablen unter Home Assistant ab 2026.8 hin. UIX wird dort als Alternative genannt. Wer bereits ein stabiles card-mod-Setup ohne diesen Fehler nutzt, muss es nicht überstürzt umbauen. Für eine Neuinstallation lohnt sich aber ein Blick in die aktuelle Card-Mod-Studio-Dokumentation, bevor die Engine gewählt wird.

Installation über HACS

1. Prüfe zuerst, ob card-mod oder UIX bereits installiert ist und Styles korrekt angewendet werden.
2. Öffne HACS und suche nach Card-Mod Studio. Das Projekt liegt im Standardverzeichnis von HACS, ein benutzerdefiniertes Repository ist nicht nötig.
3. Öffne den Eintrag und klicke auf Download.
4. Lade Home Assistant im Browser anschließend vollständig neu, am besten mit einem Hard Refresh über Strg + Umschalt + R.
5. Öffne ein normales Dashboard im Bearbeitungsmodus, bearbeite eine Karte und prüfe, ob unten der Style-Button auftaucht.

Moderne HACS-Versionen registrieren die Dashboard-Ressource normalerweise automatisch. Falls der Button fehlt, kontrolliere unter Einstellungen > Dashboards > Ressourcen, ob Card-Mod Studio geladen wird. Bei manuell verwalteten Ressourcen muss die JavaScript-Datei selbst als Modul eingetragen werden. Ein vollständiger Neustart von Home Assistant und das Leeren des Browser-Caches helfen, wenn noch eine alte Frontend-Datei geladen wird.

Wichtig für YAML-Dashboards: Seit Home Assistant 2026.8 lässt sich bei Dashboards mit mode: yaml der visuelle Karteneditor nicht mehr öffnen. Damit fehlt auch der Zugang zum Style-Button. Bereits vorhandene card-mod- oder UIX-Styles werden weiterhin dargestellt, bearbeiten musst du sie dort jedoch als Code.

Die visuellen Module im Alltag

Der Editor zeigt nur Module an, die für den jeweiligen Kartentyp sinnvoll sind. Dadurch sieht eine Tile Card andere Optionen als eine Heading-, Gauge- oder Entities-Karte. Die Vorschau reagiert direkt auf Änderungen, ohne dass dafür jedes Mal der ganze Karteneditor geschlossen werden muss.

Farben, Hintergründe und Schrift

Icon- und Akzentfarben lassen sich statisch setzen oder an Ein- und Aus-Zustände koppeln. Bei geeigneten Karten kann auch eine andere Entität die Farbe steuern. Hintergründe funktionieren als Vollfarbe oder Verlauf; beim Verlauf lässt sich der Winkel einstellen. Eine eigene Farbpalette spart wiederholtes Kopieren von Hex-Werten.

Das Font-Modul regelt unter anderem Schriftgröße, Stärke, Familie und Farbe. Je nach Karte greift das Studio dafür auf passende Variablen oder Selektoren zurück. Es gibt trotzdem Grenzen: Die Größe des großen Temperaturwerts einer Thermostatkarte und der Wertanzeige einer Gauge-Karte lässt sich über dieses Modul derzeit nicht ändern. Auch die Icon-Farbe einer Glance Card ist laut Projektdokumentation nicht erreichbar.

Filter, Rahmen und Animationen

Mit den visuellen Filtern kann eine Karte ausgegraut, abgedunkelt, transparent oder unscharf dargestellt werden. Im Video wird Blur genutzt, um eine momentan irrelevante Karte zurückzunehmen. So könnte etwa die Thermostatsteuerung sichtbar bleiben, aber optisch in den Hintergrund treten, solange die Heizung ausgeschaltet ist.

Das Border-Modul steuert Eckenradius, Farbe und Breite des Rahmens. Ein großer Radius erzeugt den pillenförmigen Look, den viele von Bubble Card kennen. Der Rahmen kann dauerhaft sichtbar sein oder nur dann auftauchen, wenn eine Bedingung erfüllt ist.

Für bewegte Hinweise gibt es Presets wie Pulse, Breathe, Bounce, Blink, Shake, Spin, Glow und Heartbeat. Das ist schnell auffällig. Genau deshalb sollten Animationen einen Zweck haben: Ein roter, pulsierender Rahmen bei einer Störung ist hilfreich; fünf dauerhaft wackelnde Karten machen ein Dashboard eher anstrengend.

Bedingungen statt dauerhafter Effekte

Viele Module besitzen eine Apply when-Logik. Ein Stil kann immer gelten, nur bei on oder off aktiv sein oder von einer anderen umschaltbaren Entität abhängen. Das macht aus einer reinen Designfunktion ein brauchbares Statussignal.

• Eine ausgeschaltete Leuchte wird grau und leicht transparent.
• Ein Rahmen erscheint, sobald ein Helfer einen Alarmzustand meldet.
• Die Karte eines Heizkörperthermostats wird weichgezeichnet, solange die zentrale Heizung aus ist.
• Ein Gefrierschrank-Sensor glüht oder pulsiert, wenn sein Wert über einem festgelegten Grenzwert liegt.

Falls kein passender binärer Sensor vorhanden ist, kann ein Home-Assistant-Helfer den Zustand aus einer Automation übernehmen. Im Video wird genau dieser Weg als Möglichkeit genannt.

Schwellenwerte und weiche Farbverläufe

Das Modul Threshold Colors verknüpft Zahlenwerte mit Farben. Als Vergleich stehen <, <=, >, >=, == und != bereit. Die Quelle kann der Zustand einer Entität oder ein numerisches Attribut sein. Damit lässt sich zum Beispiel die Luftfeuchtigkeit nach Bereichen einfärben oder ein niedriger Akkustand klar markieren.

Im Schrittmodus springt die Darstellung von einer definierten Farbe zur nächsten. Im Fade-Modus mischt Card-Mod Studio zwischen mehreren Wert-Farb-Punkten. Dieselbe Regel kann Icon, Hintergrund, Text, Akzent und Rahmen beeinflussen, sofern die gewählte Karte diese Ziele unterstützt.

Presets für ein einheitliches Dashboard

Wer mehrere Karten nach demselben Schema gestalten möchte, muss die Einstellungen nicht einzeln nachbauen. Card-Mod Studio kann die komplette Stilkonfiguration einer Karte als benanntes Preset speichern. Danach lässt sie sich in einer anderen Karte laden. Im Video wird so ein Design mit wenigen Klicks auf eine zweite Karte übertragen.

Die aktuelle Version speichert Presets pro Home-Assistant-Benutzer über frontend/get_user_data. Damit stehen sie auf anderen Geräten und in anderen Browsern desselben Benutzers zur Verfügung. Zusätzlich dient der lokale Browser-Speicher als schneller Fallback. Ein Preset ist trotzdem kein Garant dafür, dass jede Einstellung auf jedem Kartentyp identisch wirkt: Die Karten haben unterschiedliche Strukturen und CSS-Variablen.

Eigenes CSS bleibt möglich

Der visuelle Editor deckt die häufigsten Anpassungen ab, ersetzt aber nicht jede handgeschriebene Regel. Unter Advanced CSS kann eigener Code ergänzt werden. Card-Mod Studio hängt ihn nach den erzeugten Styles an. Auch Jinja2-Templates und Unterelement-Selektoren sind dort möglich, sofern die verwendete Engine sie versteht.

Das ist besonders bei Custom Cards nützlich. Mushroom, Bubble Card und andere Erweiterungen besitzen eigene DOM- und Shadow-DOM-Strukturen. Entsprechend kann ein Standardmodul dort keine Wirkung haben oder einen anderen Selektor benötigen. Card-Mod Studio priorisiert die eingebauten Home-Assistant-Karten; bei Custom Cards führt manchmal kein Weg am Advanced-CSS-Feld vorbei.

Vorhandene, komplexe Styles behandelt die aktuelle Version vorsichtig. Bei Dictionary-Styles mit Shadow-Piercing kann der normale CSS-Anteil bearbeitet werden, während weitere verschachtelte Einträge nur lesbar angezeigt und beim Speichern erhalten bleiben. Gemischte oder nicht eindeutig interpretierbare Strukturen können gesperrt werden, statt sie still zu verändern.

Wo Card-Mod Studio an Grenzen stößt

• Ohne card-mod oder UIX wird der erzeugte Stil nicht angewendet.
• Komplexe Jinja2-Logik gehört weiterhin in den Advanced-CSS-Bereich.
• Custom Cards können eigene Selektoren verlangen.
• Verschachtelte Container in weiteren Containern und Conditional Cards werden derzeit nicht visuell abgedeckt.
• UIX-exklusive Funktionen wie Makros, Billets und Forge werden nicht erzeugt.
• Der Style-Button hängt am internen Home-Assistant-Karteneditor. Ändert Home Assistant dessen Struktur, kann nach einem großen Update eine Anpassung des Plugins nötig werden.
• Auf reinen YAML-Dashboards fehlt in aktuellen Home-Assistant-Versionen der nötige visuelle Bearbeitungsmodus.

Vor größeren Änderungen lohnt sich deshalb eine Sicherung der Dashboard-Konfiguration. Nach Home-Assistant-, card-mod-, UIX- oder Studio-Updates sollte außerdem erst eine Testkarte geprüft werden, bevor ein ganzes Dashboard neu gespeichert wird.

Fazit

Card-Mod Studio senkt die Hürde für individuelle Home-Assistant-Karten deutlich. Farben, Rahmen, Filter, Animationen und zustandsabhängige Regeln lassen sich direkt im Karteneditor zusammenklicken. Presets halten das Design über mehrere Karten hinweg konsistent, während Advanced CSS den Ausweg für Sonderfälle offenlässt.

Ganz ohne technisches Grundverständnis geht es trotzdem nicht: Die eigentliche Arbeit erledigt weiterhin card-mod oder UIX, und nicht jede Karte reagiert auf dieselben CSS-Regeln. Wer diese Grenze im Hinterkopf behält, bekommt mit Card-Mod Studio einen praktischen Mittelweg zwischen Home-Assistant-Standarddesign und komplett handgeschriebenem CSS.

Wenn du noch mehr Möglichkeiten für Diagramme und Dashboard-Auswertungen suchst, passt dazu unser Beitrag zur Statistics Graph Chart Card in Home Assistant.