🎨 HA Style Hub (Sidebar, Theme, Header & HA-Settings Seiten) im visuellen Editor bearbeiten

jayjojayson · 24. Oktober 2026 um 18:36

HA Style Hub – Sidebar, Theme, Header & Einstellungsseiten von Home Assistant per Klick gestalten

Doku & Überblick: HA Style Hub – Documentation / Dokumentation
GitHub / Installation (HACS): GitHub - jayjojayson/HA-Style-Hub: Customize your Home Assistant to your liking (Sidebar, Theme, Header, HA-Settings Pages) · GitHub

Abend, ich hatte es bereits angekündigt und in den letzten 2 1/2 Monaten an einer visuellen Integration gearbeitet, die ich euch nun gerne zeigen möchte. Ich denke jetzt alles korrekt vorbereitet zu haben. HA Style Hub, Home Assistant optisch anpassen ohne dass man CSS oder YAML von Hand schreiben muss. Das ist an sich nicht neu, aber bei mir zeigt das Panel links ein nachgebautes Home Assistant in der Vorschau. Du klickst an was du ändern willst und rechts erscheinen die passenden Felder. Zudem sind alle Styles für Sidebar, Theme, Header und HA-Settings Seiten aus einer Integration heraus einstellbar (all-in-one sozusagen). Viele kleine Helfer ermöglichen ein einfaches Handling von Farben und Co. Sogar der Kiosk-Mode für Sidebar und Header ist enthalten und ihr könnt diese auf Wunsch entsprechend komplett ausblenden.

Was damit geht (kurze Zusammenfassung):

Sidebar: Die Seitenleiste als Raster oder Kacheln, mit eigenen Überschriften, Links und Icons. Stelle die Spaltenanzahl für Menüeinträge ein Es gibt auch PopUps, die Links oder sogar eine beliebige Lovelace-Karte zeigen. Die Reihenfolge kann per Drag & Drop eingestellt werden. Ausklappbare Menüs können auch erstellt werden.
Theme: Ein echtes Home-Assistant-Theme mit über 300 Variablen für Dunkel und Hell. Dazu kommen Farbpaletten, Vorlagen, Schatten-Designer, Kontrastprüfung, YAML-Import und -Export. Das Theme wird zur Laufzeit registriert, die configuration.yaml bleibt dabei unangetastet.
Header: Die Kopfzeile des Dashboards mit Farben, Verlauf, Unschärfe und Rahmen einstellen. Auf Wunsch gibt es eigene Buttons auf der rechten Seite, Live-Sensoren und einen Neustart-Button. Die Leiste lässt sich auch nach unten setzen, praktisch auf Tablets.
HA-Settings: Die Einstellungsseiten umgestalten: Menüpunkte als Kacheln, Listenansicht für „Geräte & Dienste“, Systemmonitor mit CPU, RAM und Speicher, Backup-Anzeige, Zähler und Tabellen für deine Home Assistant Umgebung, alles frei wähl- und einstellbar. Oder stellt eure Tabellenfarben für Home Assistant Tabellen (Entitäten, Automatisierung, Skript usw.) ein.
Komfort: Live-Vorschau mit Vorher-Vergleich, Rückgängig/Wiederholen, ein Verlauf der gespeicherten Stände und Export/Import jedes Bereichs ist möglich.
Neustart mit Sicherheitsnetz: Der Neustart-Dialog im Theme-Look prüft beim Öffnen automatisch die Konfiguration und sperrt den Neustart, wenn sie fehlerhaft ist.

Die Doku enthält auch zwei kurze Videos (Kurzvorstellung und Rundgang durch jede Seite), damit ihr euch das Ganze in Ruhe ansehen könnt, bevor ihr es hoffentlich installiert. Zudem erklärt sie auch viele Details am Beispielbild. Bitte unbedingt reinschauen.

Installation:

Oder über HACS als benutzerdefiniertes Repository, danach das Panel „HA Style Hub“ in der Seitenleiste öffnen. Die Details stehen in der Doku.

Das Projekt ist wie immer ein Hobbyprojekt und wächst mit der Community. Ich freue mich über Feedback, Ideen und Fehlermeldungen, am liebsten als Issue auf GitHub oder direkt hier im Thema. Zeigt auch gern eure Ergebnisse hier. Ich bin gespannt, was ihr damit baut, es gibt so viele Möglichkeiten!

Bilder sagen da bekanntlich mehr als tausend Worte:

Sidebar

Theme (ihr könnt auch die Elemente in den Boxen anklicken)

Header (linker und rechter Bereich separat einstellbar)

HA-Settings Seiten (der spannende Teil)

Ansicht aus Home Assistant (live):

Die HA-Settings Einstellungen finde ich besonders praktisch, so kann man sich auf der Einstellungen-Übersichtsseite eine richtig coole Übersicht zusammenstellen und ist dabei ziemlich frei in der Gestaltung. Die Seite besucht von uns jeder, sobald Updates und Co anstehen, also warum nicht gleich die Seite als Übersicht für das System nutzen.

Danke an UIX: der Weg, wie die Stylesheets zum richtigen Zeitpunkt in die Shadow Roots gelangen — warten auf customElements.whenDefined, dann die Methode updated des Elements einklinken — folgt dem Ansatz von UIX, dem Nachfolger von card-mod. Vielen Dank an den Autor für die Vorarbeit. UIX muss dafür nicht installiert sein.

Wenn euch das Projekt gefällt, freue ich mich über einen auf GitHub.

lSi · 25. Oktober 2026 um 09:10

Es ist schon traurig wie scheinbar wenig Interesse an visueller Aufwertung der eigenen Benutzeroberfläche besteht bei der Arbeit die du da reingesteckt hast.

Aber ich glaube das ein Großteil einfach überfordert ist mit den Konfigurationsmöglichkeiten und sich deshalb da gar nicht rantraut.

MarzyHA · 25. Oktober 2026 um 09:16

Ach, ich glaube das kommt noch. Ich z.B. habe mir das auch erstmal auf die Todo-Liste geschrieben, um es später auszutesten. Sowas gucke ich mir lieber mal in Ruhe an

jayjojayson · 25. Oktober 2026 um 09:36

Danke für die lieben Worte. Ich hoffe ja noch, dass es entdeckt wird.
Für alle die nicht viel mit yaml machen, kann das eine super Lösung sein. Aber auch für uns fortgeschrittene eine schöne Lösung, auf schnellem Wege Styleanpassungen vorzunehmen.

Vielleicht hilft das Video hier direkt im Thema, um sich einen Eindruck zu verschaffen.

Ihr könnt alles in Ruhe ausprobieren, die Bedienung sollte recht intuitiv und einfach sein. Eure Einstellungen werden im HA Style Hub Theme gespeichert. Dort könnt ihr natürlich auch euer bestehendes Theme importieren und daran weiterarbeiten, verfeinern und ausbauen. Probiert vor allen Dingen die Sidebar aus! Über die Settings Seite kann mit einem Klick HA Style Hub deaktiviert werden und alles sieht aus, wie vorher.

@MarzyHA Ich bin auf dein Feedback gespannt.

EDIT: Mal noch ein paar Bilder aus meinem Live Setup.
Ich mag es ja immer minimalistisch, so sieht meine „Geräte&Dienste“ Seite, Tab Integrationen in der Übersicht jetzt aus:

Und eine Unterseite zur Integration so:

Die Seite zum jeweiligen Geräte übernimmt die Einstellung der Cards aus dem Theme und schaut bei mir daher so aus:

Bessere Übersicht in den Tabellen, hier am Beispiel der Entitäten:

lSi · 25. Oktober 2026 um 10:03

Ich nutze ja meine eigenen Themes. Ich muss mal probieren ob die kompatibel hiermit sind. Ich nutze ja viel UIX dafür und ich weiss noch nicht ob das dann ein Problem wäre. Insbesondere die Sidebar und Header- Anpassungen von hier finde ich aber interessant.

MarzyHA · 25. Oktober 2026 um 10:04

Video hat mich überzeugt, ich schaffe es heute bestimmt noch zu testen xD
Hab ich das richtig verstanden, dass es eine Integration ist, welche dann Theme-Files generiert und automatisch anwendet?

jayjojayson · 25. Oktober 2026 um 10:12

Ja korrekt, aktuell wird aber nur eine Theme File erstellt und diese muss dann einmalig, wie gewohnt in den Profileinstellungen, ausgewählt werden. Danach werden dann immer alle Einstellungen für das Theme direkt sichtbar. Sidebar, Header und HA-Settings Seiten sind davon ausgenommen und können jeweils getrennt eingestellt werden (wird dann auch immer direkt sichtbar). Man kann also auch nur ein Teil von HA Style Hub verwenden. Ganz nach Belieben.

@lSi Na dann, ein Versuch ist es Wert. Eigentlich sollte HA Style Hub dein Theme lesen können und was nicht gelesen werden kann, wird weggelassen. Wärst dann der erste der das Mal live testet. Ich arbeite auch viel mit uix und das ist nicht weiter von der Integration betroffen. Nur die Vorgehensweise zum Einhängen der Styles passiert wie bei UIX.

MarzyHA · 25. Oktober 2026 um 10:34

@jayjojayson Erster Eindruck: Sehr cool aber auch etwas kompliziert
Das liegt wahrscheinlich wirklich an der hohen Funktionalitätsdichte. Ich wüsste auch nicht direkt, wie man das verbessern sollte.
Ansonsten ist mir direkt aufgefallen, dass beim Aktivieren des Style Hub Designs die Sidebar verändert wurde (Icons kleiner). Das hat mir nicht so gut gefallen, ich würde standardmäßig erstmal garncihts verändern und das den User vollständig überlassen. Sonst wundert man sich (wie ich) warum plötzlich alles so klein ist

jayjojayson · 25. Oktober 2026 um 10:47

Ja ist nicht so leicht das alles schön zu verpacken und trotzdem aufgeräumt zu wirken. Ich denke aber man hat sich schnell eingefuchst, ist ja wie überall man muss sich erstmal kennenlernen.

Mit den icons nach Aktivierung des HSB kann ich nachvollziehen und ist nur eine kleine Änderung. In der Regel sollen sich das User dann selber einstellen und da hast du schon Recht, besser erstmal den Standard lassen. Kannst du aber auch jetzt schon alles selber einstellen, Icon-Größe, Schrift, Abstand usw. Viel Spaß beim testen.

MarzyHA · 25. Oktober 2026 um 14:33

Kleines Update:
Ich habe nun ordentlich herumkonfiguriert und bin sehr zufrieden. Vorallem die Unterteilung der Sidebar mit Unterüberschriften ist genial! Wird das auch übers Theme gelöst? Wie beständig ist das gegen HA-Updates?

Kleiner FR: Es wäre toll, wenn man in der Sidebar auch Verlinkungen und Popups für externe Webseiten einbinden könnte! Dann könnte man zB andere selfhosted Software oder WebUIs (von Kiosk Satelite bspw) direkt über die Sidebar aufrufen und/ oder als Popup mal kurz öffnen

Zudem:

Viele Menüs und Einstellungen haben sehr lange Beschreibungen. Das meiste ist sowieso selbsterklärend, sodass die die Übersichtlichkeit eher reduzieren.

jayjojayson · 25. Oktober 2026 um 15:22

Da bin ich happy, wenn du sehr zu frieden bist.
Ich denke auch man kann wirklich viel damit anstellen und die Sidebar hat ihre Vorzüge zu anderen Varianten. Ich freue mich jeden Tag bei der Nutzung darüber. Nein die Sidebar wird nicht über das Theme gelöst. Die ist eigenständig, genauso wie der Header und die HA-Settings Einstellungen. Du kannst oben rechts über exportieren Sicherungen machen, entweder von jedem Bereich extra oder von allen Bereichen zusammen. HA Style Hub kann beim Import entsprechend unterscheiden.

Zu Beständigkeit, ich bin da bewusst vorsichtig vorgegangen. Die Integration baut nichts in HA um, sondern legt nur Styles darüber und sortiert per CSS-Grid. Das Rendering von HA bleibt unangetastet. Beim Einhängen der Styles hat mir UIX (der Nachfolger von card-mod) als Vorlage gedient (lieben Dank an die Entwickler von UIX). Der Trick, abzuwarten bis Home Assistant das Element definiert hat und sich dann in darin updated einzuklinken, stammt von dort. Sollte ein HA Update mal etwas am Aufbau ändern, bleiben die betroffenen Stellen einfach so, wie HA sie zeichnet, statt kaputtzugehen.

Seit HA 2025.3 werden Grids in der Sidebar unterstützt und mit HA 2026.10 sind nochmal viele Variablen für das Theme dazugekommen, die hatte ich vorher noch nicht drin. Selber nutze ich das inzwischen seit 2026.8.

Die Idee mit den externen Links finde ich super, gerade für selbst gehostete WebUIs. Bisher gehen Links und Popups nur auf Seiten innerhalb von Home Assistant (Dashboards, Panels, Einstellungsseiten) oder auf eine Lovelace-Karte. Externe Adressen sind aktuell noch nicht dabei. Ich setze es auf meine Liste! Was aber schon aktuell funktioniert, ich habe mein Venus OS (extern) als Dashboard (Website) angelegt und das dann in der Sidebar als eigenen Pfad hinterlegt.

Direkt einfügen ist aber viel besser und werde ich angehen.

Mit den Beschreibungen habe ich auch lange überlegt und fand das für den Anfang nicht schlecht. Sehe das aber auch so, dass sie die Übersicht etwas schlechter machen. Werde mal sehen, zwei Ideen habe ich, wie ich das verbessern kann.