Mit Card Mod Studio kannst du Home Assistant Karten optisch anpassen, ohne dich durch CSS, Card Mod YAML oder Jinja2-Templates kämpfen zu müssen. Farben, Icons, Schriften, Animationen, Rahmen und sogar statusabhängige Regeln lassen sich direkt im Karten-Editor per Klick einstellen.
In diesem Artikel schauen wir uns die wichtigsten Menüs von Card Mod Studio an und zeigen, wofür du welche Funktion nutzen kannst, um dein Dashboard individueller und übersichtlicher zu gestalten.
Card Mod Studio installieren
Damit Card Mod Studio funktioniert, brauchst du zwei Erweiterungen in Home Assistant: einmal card-mod für die eigentliche Verarbeitung der Styles und zusätzlich Card Mod Studio als grafischen Editor.
Die Installation läuft über HACS, also den Home Assistant Community Store. Falls HACS bei dir bereits eingerichtet ist, gehst du so vor:
- Öffne HACS in Home Assistant.
- Suche nach card-mod und installiere die aktuelle Version.
- Aktualisiere danach den Browser.
- Suche anschließend nach Card Mod Studio und installiere auch diese Erweiterung.
- Aktualisiere den Browser erneut.
Die relevanten GitHub-Projekte findest du hier: card-mod auf GitHub und Card Mod Studio auf GitHub.
Nach der Installation findest du im Karten-Editor zusätzlich zur normalen YAML-/Code-Ansicht eine neue Styling-Option. Darüber öffnest du den visuellen Editor von Card Mod Studio.
Erste Karte öffnen und Styling-Editor nutzen
Zum Einstieg eignet sich zum Beispiel eine Kachelkarte. Du gehst in den Bearbeitungsmodus deines Dashboards, fügst eine neue Karte hinzu und wählst eine Entität aus, etwa einen Lichtstreifen oder Schalter.
Im Karten-Editor erscheint anschließend der Bereich Styling. Dort öffnest du den Style Editor von Card Mod Studio. Praktisch ist dabei: Du kannst jederzeit zwischen dem visuellen Editor und dem normalen Code-Editor wechseln.
Ein besonders hilfreiches Detail: Wenn du mit der Maus über Bereiche der Vorschau gehst und darauf klickst, springt Card Mod Studio direkt zum passenden Einstellungsbereich. Klickst du also zum Beispiel auf das Icon, landest du bei den Icon-Einstellungen. Klickst du auf den Hintergrund, öffnet sich der Bereich für Background-Anpassungen.
Farbfavoriten mit „My Color Palette“ anlegen
Im Menü My Color Palette kannst du eigene Lieblingsfarben definieren. Diese Farben stehen anschließend in den anderen Menüs zur Auswahl, zum Beispiel bei Icon-Farben, Akzentfarben oder Hintergründen.
So legst du eine eigene Farbe an:
- Öffne My Color Palette.
- Vergib einen Namen für die Farbe.
- Wähle über den Farbwähler deinen gewünschten Farbton aus.
- Speichere die Farbe in deiner Palette.
Zusätzlich kannst du in diesem Bereich Standardfarben für bestimmte Zustände festlegen, etwa eine Farbe für an und eine andere für aus. Diese Default-Werte greifen später in den Menüs, wenn du statusabhängige Farben verwendest.
Schriften in Home Assistant Karten anpassen
Im Bereich Fonts passt du die Schrift einer Karte an. Wichtig: Viele Optionen werden erst sichtbar angewendet, wenn du den jeweiligen Toggle aktivierst. Nur am Slider zu ziehen reicht also nicht immer aus.
Du kannst unter anderem folgende Werte ändern:
- Schriftgröße
- Schriftstärke, zum Beispiel normal, medium oder fett
- Schriftfamilie
- Textfarbe
- optional eine eigene Schriftart
Änderungen siehst du direkt in der Vorschau. Wenn du wieder zum Standard zurück möchtest, entfernst du den gesetzten Farbwert oder deaktivierst den entsprechenden Bereich.
Visuelle Filter: Graustufen, Helligkeit, Blur und Deckkraft
Mit den Visual Filters kannst du den Look einer kompletten Karte beeinflussen. Das ist besonders hilfreich, wenn Karten bewusst in den Hintergrund treten oder bei bestimmten Zuständen anders dargestellt werden sollen.
Zur Verfügung stehen unter anderem:
- Grayscale: Die Karte wird in Graustufen angezeigt.
- Brightness: Die Helligkeit wird erhöht oder reduziert.
- Blur: Die Karte wird weichgezeichnet.
- Opacity: Die Deckkraft wird angepasst.
- Transition Speed: Die Geschwindigkeit von Übergängen wird verändert.
Spannend ist die Option Apply when. Damit steuerst du, wann ein Effekt angewendet werden soll:
- immer
- nur wenn die Entität eingeschaltet ist
- nur wenn die Entität ausgeschaltet ist
- abhängig vom Status einer anderen Entität
Gerade diese Abhängigkeit von anderen Entitäten macht Card Mod Studio sehr flexibel. So kannst du Karten nicht nur schöner gestalten, sondern auch gezielt Informationen hervorheben.
Akzentfarbe für Funktionen und Features ändern
Im Menü Accent passt du die Akzentfarbe von Karten-Features an. Bei einer Kachelkarte betrifft das zum Beispiel einen Umschalter oder andere Feature-Elemente innerhalb der Karte.
Du kannst eine feste Farbe verwenden oder unterschiedliche Farben für verschiedene Zustände definieren. Ein typisches Beispiel: Ist eine Entität aktiv, wird das Feature blau oder rot angezeigt. Ist sie inaktiv, erscheint es grau oder grün.
Auch hier steht wieder die Steuerung über andere Entitäten zur Verfügung. Dadurch lassen sich sehr praktische Dashboard-Hinweise bauen.
Farbe durch eine andere Entität steuern
Ein guter Anwendungsfall ist eine Karte, die dir anzeigt, ob ein Update gerade sinnvoll ist oder nicht. Die Farbe dieser Karte kann vom Zustand einer anderen Entität abhängen.
Beispiel: Solange ein bestimmtes Gerät aktiv ist, soll ein Update-Button rot dargestellt werden. Ist das Gerät aus, wird die Karte grün angezeigt und signalisiert: Jetzt wäre ein guter Zeitpunkt für das Update.
Die Vorgehensweise ist grundsätzlich so:
- Erstelle eine passende Karte, zum Beispiel eine Button- oder Kachelkarte.
- Öffne den Styling-Editor.
- Aktiviere die Akzentfarbe.
- Wähle den Modus für unterschiedliche Farben bei an und aus.
- Lege die gewünschten Farben fest, zum Beispiel rot für aktiv und grün für inaktiv.
- Wähle bei der Steuerung die Entität aus, deren Status die Farbe beeinflussen soll.
So wird aus einer rein optischen Anpassung ein echtes Dashboard-Signal, das dir schnell zeigt, ob eine Aktion gerade sinnvoll ist.
Icon-Farbe und Icon-Größe anpassen
Das Menü Icon Colors funktioniert ähnlich wie die Akzentfarben, bezieht sich aber auf das Icon der Karte. Du kannst eine feste Farbe setzen oder die Icon-Farbe abhängig vom Status der eigenen oder einer anderen Entität steuern.
Zusätzlich kannst du hier die Icon-Größe verändern. Das ist eine sehr praktische Option, denn manche Home Assistant Icons wirken je nach Karte etwas klein oder gehen im Dashboard unter. Über den Slider lässt sich das Icon schnell größer oder kleiner darstellen.
Schwellwerte für Farben nutzen
Besonders spannend wird Card Mod Studio bei den Threshold Colors. Damit kannst du Farben anhand von Zahlenwerten oder Attributen verändern. Ein perfektes Beispiel ist eine Thermostatkarte.
Statt eine Thermostatkarte immer gleich aussehen zu lassen, kannst du Temperaturbereiche farblich darstellen:
- bis 18 °C: blau
- ab 19 °C: gelb
- ab 20 °C: orange
- ab 21 °C: rot
So richtest du Schwellwerte ein:
- Füge eine Thermostatkarte hinzu.
- Öffne den Styling-Editor.
- Aktiviere Threshold Colors.
- Wähle aus, worauf die Farben angewendet werden sollen, zum Beispiel auf die Akzentfarbe.
- Füge mehrere Regeln hinzu.
- Definiere pro Regel einen Wert, einen Operator und eine Farbe.
- Wähle bei Bedarf das richtige Attribut der Entität aus.
Wichtig ist der letzte Punkt: Bei einer Thermostatkarte musst du darauf achten, dass du das passende Attribut verwendest, zum Beispiel die eingestellte Zieltemperatur. Wenn du nur die Entität auswählst, aber nicht das richtige Attribut, kann es passieren, dass die Farbe nicht wie erwartet reagiert.
Richtig eingerichtet siehst du direkt in der Vorschau, wie sich die Farbe beim Ändern der Temperatur anpasst.
Hintergrund einer Karte anpassen
Im Bereich Background gestaltest du den Kartenhintergrund. Du kannst entweder eine einheitliche Hintergrundfarbe setzen oder mit Farbverläufen arbeiten.
Möglich sind unter anderem:
- einfarbige Hintergründe
- Farbverläufe
- verschiedene Verlaufsrichtungen
- statusabhängige Hintergründe
Auch hier kannst du wieder festlegen, wann der Hintergrund gelten soll: immer, nur bei aktivem Status, nur bei inaktivem Status oder abhängig von einer anderen Entität.
Karten mit Animationen lebendiger machen
Mit dem Menü Animations kannst du Karten animieren. Das sollte man natürlich sparsam einsetzen, aber für wichtige Zustände oder Warnungen kann es sehr hilfreich sein.
Card Mod Studio bietet verschiedene Animationstypen, zum Beispiel:
- Pulsieren
- Atmen
- Blinken
- Bounce
- Shake
- Spin
- Glow
Die Geschwindigkeit lässt sich ebenfalls einstellen. In der Vorschau siehst du sofort, wie sich die gewählte Animation auswirkt. Gerade der Glow-Effekt kann dezent eingesetzt sehr gut aussehen.
Rahmen und abgerundete Ecken einstellen
Im Bereich Border and Radius passt du die Form deiner Karten an. Schon ein größerer Border-Radius kann den kompletten Dashboard-Look deutlich moderner wirken lassen.
Du kannst hier unter anderem einstellen:
- Rundung der Kartenecken
- Rahmendicke
- Rahmenfarbe
- statusabhängige Rahmenfarben
Mit stark abgerundeten Ecken erreichst du zum Beispiel schnell eine Optik, die an Bubble-Card-Layouts erinnert. Dafür brauchst du keine komplizierte YAML-Konfiguration, sondern nur den passenden Slider im Editor.
Voreinstellungen speichern und wiederverwenden
Eine der praktischsten Funktionen von Card Mod Studio sind die Presets. Damit speicherst du einmal erstellte Styles und wendest sie später auf andere Karten an.
Das spart enorm viel Zeit, wenn du mehrere Karten im gleichen Look gestalten möchtest.
So nutzt du Presets:
- Gestalte eine Karte nach deinen Wünschen.
- Klicke im Styling-Editor auf Save.
- Vergib einen Namen für das Preset.
- Speichere die Karte.
- Öffne eine andere Karte.
- Wähle im Styling-Editor dein gespeichertes Preset aus.
Die gespeicherten Einstellungen werden direkt auf die neue Karte übertragen. Das ist besonders nützlich für wiederkehrende Layouts, zum Beispiel gleiche Rahmen, identische Icon-Größen oder ein einheitlicher Kartenstil für bestimmte Räume.
Advanced CSS für zusätzliche Anpassungen
Card Mod Studio richtet sich klar an alle, die möglichst wenig Code schreiben möchten. Trotzdem gibt es im unteren Bereich auch eine Möglichkeit für Advanced CSS. Dort kannst du bei Bedarf eigene Anpassungen ergänzen.
Für die meisten Standardanpassungen reichen die visuellen Menüs aber völlig aus. Card Mod Studio erzeugt im Hintergrund die passenden Card-Mod-Anweisungen und schreibt sie in die Kartenkonfiguration.
Fazit: Card Mod Studio macht CSS Karten Design endlich zugänglich
Card Mod Studio ist eine sehr komfortable Möglichkeit, Home Assistant Dashboards individuell zu gestalten, ohne selbst CSS schreiben zu müssen. Farben, Schriften, Icons, Hintergründe, Animationen, Rahmen und Schwellwerte lassen sich direkt im Karten-Editor konfigurieren.
Besonders stark sind die statusabhängigen Farben, die Steuerung über andere Entitäten und die Preset-Funktion. Wenn du deine Home Assistant Karten optisch aufwerten möchtest, ist Card Mod Studio aktuell einer der einfachsten Wege, um schnell sichtbare Ergebnisse zu bekommen.
Weitere Home Assistant Beiträge findest du hier!
