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 bei uns in der Community 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, Icons und Farben. 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.yamlbleibt 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. 
Ihr könnt mit HA Style Hub alle Bereich unabhängig voneinadner bearbeiten und müsst kein neues Dashboard-Design oder so aufbauen. Sidebar, Header und Theme sind voneinander getrennt. Ihr könnt also z.B. auch nur die Sidebar oder nur den Header bearbeiten, wie ihr möchtet. Viel Spaß beim ausprobieren.
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)
Ansichten 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.
Einträge je Benutzer ausblenden
Einstellungen verschieben wie jeden anderen Eintrag
Vorlagen für die Seitenleiste
Eine ehrlichere Vorschau
Dazu etwas Feinschliff
