HA Style Hub – Documentation / Dokumentation

Features

Funktionen

Four areas, one panel — everything is applied live and only stored when you save.

Vier Bereiche, ein Panel — alles wirkt sofort und wird erst mit Speichern abgelegt.

🧱 Sidebar

Grid-Layout

1 to 4 columns while expanded, 1 to 3 while collapsed.

1 bis 4 Spalten ausgeklappt, 1 bis 3 eingeklappt.

Free orderFreie Reihenfolge

Drag and drop, including Settings, Notifications and the user entry.

Per Drag and Drop, auch Einstellungen, Benachrichtigungen und Profil.

Rename & iconsUmbenennen & Icons

Own label and any mdi icon per entry.

Eigene Beschriftung und beliebiges mdi-Icon je Eintrag.

Section headingsZwischenüberschriften

Dividers with name, icon and height; groups can be folded, hidden while collapsed.

Trenner mit Name, Icon und Höhe; Gruppen lassen sich zuklappen, eingeklappt ausgeblendet.

Popup linksPopUp-Links

One entry that opens a window with several pages or with a Lovelace card (YAML).

Ein Eintrag, der ein Fenster mit mehreren Seiten oder einer Lovelace-Karte (YAML) öffnet.

AppearanceAussehen

Gradients, colors, fonts, borders per side, radius per corner, hover colors.

Verläufe, Farben, Schrift, Rahmen je Seite, Radius je Ecke, Hover-Farben.

Restart buttonNeustart-Knopf

Optional entry that restarts Home Assistant — admins only, with a configuration check first.

Optionaler Eintrag für den Neustart — nur für Administratoren, mit vorheriger Konfigurationsprüfung.

Notification drawerBenachrichtigungsfenster

Optionally styled to match the sidebar.

Auf Wunsch im gleichen Design wie die Seitenleiste.

🧭 Header

Dashboard headerKopfzeile des Dashboards

Colors, opacity and blur, height, border, corners, tab and icon sizes.

Farben, Deckkraft und Weichzeichner, Höhe, Rahmen, Ecken, Reiter- und Icongrößen.

Top or bottomOben oder unten

Put the bar at the top or the bottom — or hide it completely.

Die Leiste oben oder unten platzieren — oder ganz ausblenden.

Own buttonsEigene Buttons

Restart button, own links, sensors, CPU / memory and storage next to the standard buttons.

Neustart-Button, eigene Links, Sensoren, CPU / RAM und Speicher neben den Standard-Buttons.

Switch entitiesSchalter-Entitäten

Hiding header and sidebar are real switches — for a dashboard button or an automation.

Ausblenden von Kopfzeile und Seitenleiste sind echte Schalter — für Dashboard-Knopf oder Automation.

🌓 Theme

Real HA themeEchtes HA-Theme

309 variables in 26 groups, dark and light, state colors per device type.

309 Variablen in 26 Gruppen, Dunkel und Hell, Zustandsfarben je Gerätetyp.

Choose a paletteFarbpalette wählen

Pick one main color; both modes are derived with readable text (WCAG).

Eine Hauptfarbe wählen; beide Modi werden daraus abgeleitet, mit lesbarem Text (WCAG).

TemplatesVorlagen

Four finished looks fill both modes with one click and stay editable.

Vier fertige Looks füllen beide Modi mit einem Klick und bleiben änderbar.

Import / Export

Existing YAML themes can be imported, your theme exported as .yaml.

Bestehende YAML-Themes lassen sich importieren, dein Theme als .yaml exportieren.

🏠 HA-Settings

Rounded menu boxesAbgerundete Menü-Boxen

Menu entries of the Settings page in your own colors and sizes.

Menüpunkte der Einstellungsseite in eigenen Farben und Größen.

Slim listsSchmale Listen

Devices & services (and Apps) as a list instead of a card grid.

Geräte & Dienste (und Apps) als Liste statt als Kartenraster.

System monitorSystemmonitor

CPU, memory and storage with graphs, last backup and counters.

CPU, Arbeitsspeicher und Speicher mit Verläufen, letztes Backup und Zähler.

Favourites barFavoriten-Leiste

Up to 12 own links as buttons on the Settings page.

Bis zu 12 eigene Links als Buttons auf der Einstellungsseite.

⚡ ComfortKomfort

Live previewLive-Vorschau

Changes show up immediately, saving is a separate step.

Änderungen sind sofort sichtbar, gespeichert wird getrennt.

Click in the previewIm Bild anklicken

Every page shows a model of Home Assistant — click what you want to change.

Jede Seite zeigt ein nachgebautes Home Assistant — anklicken, was du ändern willst.

SearchSuche

Finds every setting (Ctrl K). Ctrl S saves, Ctrl Z undoes.

Findet jede Einstellung (Strg K). Strg S speichert, Strg Z macht rückgängig.

Change counterÄnderungszähler

Unsaved changes per area; changed fields show their previous value.

Ungespeicherte Änderungen je Bereich; geänderte Felder zeigen den alten Wert.

HistoryVerlauf

The last 10 saved states — one click loads an earlier one back.

Die letzten 10 gespeicherten Stände — ein Klick lädt einen früheren zurück.

No build stepKein Build-Schritt

Plain JavaScript, no npm and no bundler.

Reines JavaScript, kein npm und kein Bundler.

Tour

A short look at what HA Style Hub does and how the panel feels.

Ein kurzer Blick darauf, was HA Style Hub kann und wie sich das Panel anfühlt.

Intro

Guided tour of the panel

Rundgang durch das Panel

Installation

HACS

HACS → ⋮ → Custom repositories
HACS → ⋮ → Benutzerdefinierte Repositories
Add https://github.com/jayjojayson/HA-Style-Hub, category Integration
https://github.com/jayjojayson/HA-Style-Hub als Kategorie Integration hinzufügen
Install HA Style Hub and restart Home Assistant
HA Style Hub installieren und Home Assistant neu starten
Settings → Devices & services → Add integration → HA Style Hub
Einstellungen → Geräte & Dienste → Integration hinzufügen → HA Style Hub

Manual

Manuell

Copy the folder custom_components/ha_style_hub into your Home Assistant configuration:

Den Ordner custom_components/ha_style_hub in die Home-Assistant-Konfiguration kopieren:

config/
└── custom_components/
    └── ha_style_hub/
        ├── __init__.py
        ├── manifest.json
        ├── …
        ├── translations/
        └── www/
            ├── ha-style-hub.js
            └── ha-style-hub-panel.js

Restart Home Assistant, then add the integration.

Home Assistant neu starten, danach die Integration hinzufügen.

Requirements: Home Assistant 2025.3 or newer. The full tile look (icon above the label) needs 2026.5 or newer, because only that sidebar generation exposes the required CSS parts.

Voraussetzungen: Home Assistant 2025.3 oder neuer. Die vollständige Kachelansicht (Icon über der Beschriftung) braucht 2026.5 oder neuer, weil erst diese Generation der Seitenleiste die nötigen CSS-Parts bereitstellt.

Usage

Bedienung

After the installation a HA Style Hub entry appears in the sidebar and opens the configuration panel. Every page is a stage: on the left a model of Home Assistant, on the right the fields. Click in the model on what you want to change — the chosen part is outlined and labelled, and its fields open.

Nach der Installation erscheint der Eintrag HA Style Hub in der Seitenleiste und öffnet das Konfigurationspanel. Jede Seite ist eine Bühne: links ein nachgebautes Home Assistant, rechts die Felder. Klick im Bild auf das, was du ändern willst — das gewählte Element wird umrandet und beschriftet, seine Felder öffnen sich.

The top bar

Die Kopfleiste

the four areas Sidebar, Theme, Header and HA-Settings
die vier Bereiche Sidebar, Theme, Header und HA-Settings
a search over all settings (Ctrl K)
eine Suche über alle Einstellungen (Strg K)
the counter of unsaved changes, Discard, Save and the history
der Zähler der ungespeicherten Änderungen, Verwerfen, Speichern und der Verlauf
icons for Export / Import and Info
Symbole für Export / Import und Info

A changed field shows a dot and its previous value; Before below the preview shows the saved state. On a phone the areas sit in a bar at the bottom.

Ein geändertes Feld zeigt einen Punkt und den Wert von vorher; Vorher unter dem Bild zeigt den gespeicherten Stand. Auf dem Handy stehen die Bereiche in einer Leiste unten.

Sidebar

LayoutLayout

Columns, gap and sidebar width, tile and row height
Spalten, Abstand, Breite der Seitenleiste, Kachel- und Zeilenhöhe
Whether the fixed entries join the grid
Übernahme der festen Einträge ins Raster
The optional restart button
Der optionale Neustart-Knopf
Hide the sidebar completely (kiosk mode) at the bottom of the column
Sidebar ganz ausblenden (kiosk-mode) unten in der Spalte

Everything is shown right away in the model next to the fields.

Alles ist sofort im Modell neben den Feldern sichtbar.

EntriesEinträge

A click on an entry in the model selects it, dragging it there reorders it.
Ein Klick auf einen Eintrag im Bild wählt ihn aus, Ziehen dort sortiert um.
In the list on the right (drag and drop, eye) the chosen entry folds open: name, icon, column span, colors as tiles, hide, up / down, reset.
In der Liste rechts (Drag and Drop, Auge) klappt der gewählte Eintrag auf: Name, Icon, Spaltenbreite, Farben als Kacheln, Ausblenden, nach oben / unten, Zurücksetzen.
The + button adds a section heading, a link to a page of Home Assistant (automations, entities, tools … or an own path) or a popup link.
Der +-Knopf fügt eine Zwischenüberschrift, einen Link zu einer Seite von Home Assistant (Automatisierungen, Entitäten, Werkzeuge … oder eigener Pfad) oder einen PopUp-Link ein.
A popup link opens a window with several pages or with a card (YAML from the code editor of a dashboard card, at most 50 KB). Width and height can be set, 0 = automatic.
Ein PopUp-Link öffnet ein Fenster mit mehreren Seiten oder einer Karte (YAML aus dem Code-Editor einer Dashboard-Karte, höchstens 50 KB). Breite und Höhe sind einstellbar, 0 = automatisch.

Section headings

Zwischenüberschriften

They take a name, an icon and their own colors, run across the full width and have no target.
Sie bekommen Name, Icon und eigene Farben, laufen über die volle Breite und haben kein Ziel.
Hidden while the sidebar is collapsed — there is no room for text.
Im eingeklappten Zustand ausgeblendet — dort ist kein Platz für Text.
Drag an entry a little to the right to file it under the heading above it; back to the left takes it out.
Einen Eintrag etwas nach rechts ziehen, um ihn unter der Überschrift darüber einzusortieren; nach links löst die Zuordnung.
With “Can be collapsed” a click on the heading folds the whole group. Which headings are folded is remembered per browser — a view, not a setting.
Mit „Lässt sich zusammenklappen“ klappt ein Klick auf die Überschrift die ganze Gruppe weg. Welche zugeklappt sind, merkt sich jeder Browser selbst — eine Ansicht, keine Einstellung.

AppearanceAussehen

Background and gradients, text and icon colors
Hintergrund und Verläufe, Text- und Iconfarben
Font size and weight, icon size
Schriftgröße und -stärke, Icongröße
Borders (per side), radius (per corner), title and free CSS
Rahmen (je Seite), Radius (je Ecke), Titel und freies CSS

A click on a part of the sidebar in the model opens its group.

Ein Klick auf einen Teil der Seitenleiste im Bild öffnet seine Gruppe.

Moving Settings, Notifications and the user entry: Home Assistant renders those three in a separate block pinned to the bottom. Switch on “Move Settings, Notifications and the user entry into the grid” in the Layout tab — only then do they become part of the sortable grid.

Einstellungen, Benachrichtigungen und Profil verschieben: Home Assistant rendert diese drei in einem eigenen Block am unteren Rand. Im Reiter Layout die Option „Einstellungen, Benachrichtigungen und Profil ins Raster übernehmen“ aktivieren — erst dann werden sie Teil des sortierbaren Rasters.

Header

What can be setWas sich einstellen lässt

Colors and gradient, opacity and blur, height, border and corners
Farben und Verlauf, Deckkraft und Weichzeichner, Höhe, Rahmen und Ecken
A border around each button and view tab, icon and title / tab size, colors of the tabs (plus a hover background)
Ein Rahmen um jeden Button und Reiter, Icon- und Titel-/Reitergröße, Farben der Reiter (plus Hover-Hintergrund)
The four buttons Home Assistant puts at the right end — add, search, Assist and edit — can be switched off one by one
Die vier Button, die Home Assistant rechts einsetzt — Hinzufügen, Suche, Assist, Bearbeiten — lassen sich einzeln abschalten
The bar at the top or at the bottom of the dashboard, or hidden completely (also available as a switch entity)
Die Leiste oben oder unten im Dashboard, oder ganz ausgeblendet (auch als Schalter-Entität)
The right side of the header (buttons, links, CPU / RAM) can get a color of its own
Die rechte Seite der Kopfzeile (Buttons, Links, CPU / RAM) kann eine eigene Farbe bekommen

The card Buttons on the right side adds in front of Home Assistant's buttons:

Die Karte Buttons rechte Seite setzt vor die Buttons von Home Assistant:

the restart button
den Neustart-Button
own links to pages of Home Assistant
eigene Links zu Seiten von Home Assistant
sensors — the state of any entity, a click opens its more-info dialog
Sensoren — der Zustand einer beliebigen Entität, ein Klick öffnet ihren Mehr-Info-Dialog
CPU, memory and free / used storage as small values
CPU, RAM sowie freier / belegter Speicher als kleine Werte

Simple expands only the clicked group, All fields all of them; three templates are a starting point.

Einfach klappt nur die angeklickte Gruppe auf, Alle Felder alle; drei Vorlagen sind ein Ausgangspunkt.

Theme

The colors of Home Assistant itself — dashboards, dialogs and the settings pages — as a real theme. More in The theme.

Die Farben von Home Assistant selbst — Dashboards, Dialoge und Einstellungsseiten — als echtes Theme. Mehr unter Das Theme.

HA-Settings

The model shows the Settings page, Devices & services or a table (picked at the top of the field column). A click on the menu entries, the favourites bar or the system monitor opens its fields.

Das Bild zeigt die Einstellungsseite, Geräte & Dienste oder eine Tabelle (oben in der Feldspalte gewählt). Ein Klick auf Menüpunkte, Favoriten-Leiste oder Systemmonitor öffnet ihre Felder.

Menu entries of the Settings pageMenüpunkte der Einstellungsseite

Home Assistant draws a colored circle behind every icon. With Menu entries as rounded boxes it becomes a box:

Home Assistant zeichnet hinter jedes Symbol einen farbigen Kreis. Mit Menüpunkte als abgerundete Boxen wird daraus eine Box:

adjustable corner radius (0 is sharp, large values give the circle back)
einstellbarer Eckenradius (0 ist eckig, große Werte ergeben wieder den Kreis)
one box color for all entries (empty: every entry keeps its own), the icon color
eine Farbe der Box für alle Menüpunkte (leer: jeder behält seine eigene), die Farbe des Symbols
box size and icon size in px; 0 means “as Home Assistant draws it”
Größe der Box und Größe des Symbols in px; 0 heißt „wie Home Assistant es zeichnet“
border and corners of their own, plus a mouse hover that also applies to the system monitor and the backup box
eigener Rahmen und eigene Ecken, dazu ein Maus-Hover, der auch für Systemmonitor und Backup-Box gilt

Devices & services as a list, tablesGeräte & Dienste als Liste, Tabellen

The integrations are shown as slim rows instead of a grid of cards — name on the left, count and symbols on the right.

Die Integrationen erscheinen als schmale Zeilen statt als Kartenraster — Name links, Anzahl und Symbole rechts.

Row height (56 px by default, at least 32), gap, maximum width (0 is full width)
Zeilenhöhe (Standard 56 px, mindestens 32), Abstand, maximale Breite (0 ist volle Breite)
Two or three columns (fewer by itself on a narrow screen)
Zwei oder drei Spalten (auf schmalen Bildschirmen von selbst weniger)
Border width, corner radius (per side / corner if you like) and border color; a separate border color for integrations with a problem
Rahmenstärke, Eckenradius (auf Wunsch je Seite / Ecke) und Rahmenfarbe; eigene Rahmenfarbe für Integrationen mit Problem
Hover color with opacity
Hover-Farbe mit Deckkraft
Optionally the Apps page becomes a list as well
Auf Wunsch wird auch die Apps-Seite zur Liste

Tables

Tabellen

Group headers (automations, entities, helpers …): background, text color, size and weight
Gruppenköpfe (Automatisierungen, Entitäten, Helfer …): Hintergrund, Textfarbe, Größe und Stärke
Rows: own color, a color for every second row, hover color with opacity, font size (0 or 10 to 24 px)
Zeilen: eigene Farbe, eine Farbe für jede zweite Zeile, Hover-Farbe mit Deckkraft, Schriftgröße (0 oder 10 bis 24 px)

Settings page: order, favourites, monitorEinstellungsseite: Reihenfolge, Favoriten, Monitor

Order: menu entries can be moved inside their block and hidden (a block in which everything is hidden disappears).
Reihenfolge: Menüpunkte lassen sich innerhalb ihres Blocks verschieben und ausblenden (ein Block, in dem alles ausgeblendet ist, verschwindet).
Columns and tiles: one, two or three columns (the page gets 960 or 1040 px wide; Settings › System follows), tiles with the icon above the name.
Spalten und Kacheln: eine, zwei oder drei Spalten (die Seite wird 960 bzw. 1040 px breit; Einstellungen › System zieht mit), Kacheln mit dem Symbol über dem Namen.
Favourites bar: up to 12 own links as buttons, centred above the cards or in the header bar of the Settings page, each with its own look (colors, icon, height, border, corners, icon only).
Favoriten-Leiste: bis zu 12 eigene Links als Buttons, mittig über den Karten oder in der Kopfleiste der Einstellungsseite, jeweils mit eigenem Aussehen (Farben, Icon, Höhe, Rahmen, Ecken, nur Icon).
System monitor: processor, memory and storage at the top or at the end, optionally with graphs of the last 5 minutes and a storage bar.
Systemmonitor: Prozessor, Arbeitsspeicher und Speicher oben oder am Ende, auf Wunsch mit Verläufen der letzten 5 Minuten und Speicherbalken.
Last backup: own box with time, size, name and location, with Create backup now.
Letztes Backup: eigene Box mit Zeit, Größe, Name und Speicherort, mit Backup jetzt erstellen.
Counters: devices, entities, integrations, apps, automations, scenes, scripts, custom cards, blueprints, users, tokens — you choose, most with a second line such as unreachable devices.
Zähler: Geräte, Entitäten, Integrationen, Apps, Automationen, Szenen, Skripte, Custom Cards, Blueprints, Benutzer, Token — nach Wahl, die meisten mit einer zweiten Zeile wie nicht erreichbare Geräte.
The tip line below the menu can be hidden. The list of entries shows what the Settings page had when it was last open in this browser.
Die Tipp-Zeile unter dem Menü lässt sich ausblenden. Die Liste der Menüpunkte zeigt, was die Einstellungsseite hatte, als sie zuletzt in diesem Browser geöffnet war.

These functions work on the structure of the pages as found in the Home Assistant source and only touch those elements on pages under /config. Should a later version change it, the pages simply stay as Home Assistant draws them.

Diese Funktionen arbeiten mit dem Aufbau der Seiten, wie er im Quelltext von Home Assistant steht, und fassen nur diese Elemente auf Seiten unter /config an. Ändert eine spätere Version ihn, bleiben die Seiten einfach so, wie Home Assistant sie zeichnet.

Export / Import · History · Info

Export and import page — Export / Import: one page for everything.

Export / Import: the complete configuration as .json, and sidebar, theme (.yaml), header and HA-Settings on their own. An import is taken into the page at once and only stored with Save; until then Discard brings back the saved state.
Export / Import: die komplette Konfiguration als .json sowie Sidebar, Theme (.yaml), Header und HA-Settings einzeln. Ein Import wird sofort in die Seite übernommen und erst mit Speichern abgelegt; bis dahin holt Verwerfen den gespeicherten Stand zurück.
History: the clock icon opens the last 10 saved states, newest first, each with the time, the person who saved it and what changed (e.g. “Header: 3 values”). Restore loads a state into the page — stored only with Save. Administrators only; the history lives in .storage/ha_style_hub.history.
Verlauf: das Uhr-Symbol öffnet die letzten 10 gespeicherten Stände, der neueste oben, jeweils mit Zeit, Speicherndem und Änderungen (z. B. „Header: 3 Werte“). Wiederherstellen lädt einen Stand in die Seite — gespeichert wird erst mit Speichern. Nur für Administratoren; der Verlauf liegt in .storage/ha_style_hub.history.
Info: welcome text, author and links, support, the master switch HA Style Hub active, debug output in the browser console and Reset everything.
Info: Willkommenstext, Autor und Links, Unterstützung, der Hauptschalter HA Style Hub aktiv, Debug-Ausgaben in der Browser-Konsole und Alles zurücksetzen.

Every change is applied immediately, but only written to .storage when you press Save. Discard returns to the stored state.

Jede Änderung wirkt sofort, gespeichert wird sie in .storage aber erst mit Speichern. Verwerfen stellt den gespeicherten Stand wieder her.

The theme

Das Theme

The Theme tab does not style the sidebar, it styles Home Assistant itself: dashboards, dialogs and the settings pages. What is entered there is registered as a real Home Assistant theme, exactly like a theme from configuration.yaml — it shows up in the theme picker of every user profile.

Der Reiter Theme gestaltet nicht die Seitenleiste, sondern Home Assistant selbst: Dashboards, Dialoge und die Einstellungsseiten. Was dort eingetragen wird, meldet die Integration als echtes Home-Assistant-Theme an — genau wie ein Theme aus der configuration.yaml. Es steht danach in der Theme-Auswahl jedes Benutzerprofils.

Theme dialogs: choose a palette from one color, and templates — The dialogs *Choose a palette* and *Templates*.

Layout of the page

Aufbau der Seite

Left: the preview with every colourable element, below it dark / light, copy and clear
Links: das Vorschaubild mit allen färbbaren Elementen, darunter Dunkel / Hell, Kopieren und Leeren
Right: Choose a palette and Templates, the fourteen folding groups
Rechts: Farbpalette wählen und Vorlagen, die vierzehn aufklappbaren Gruppen
Bottom: the name and registering
Unten: Name und Eintragen
Header variables are on the Header page, sidebar variables on Sidebar › Appearance
Variablen der Kopfzeile stehen auf der Seite Header, die der Seitenleiste unter Sidebar › Aussehen

Choose a palette

Farbpalette wählen

Builds both modes from a single main color: primary color, backgrounds, text, header, icons, sliders and badges
Erzeugt beide Modi aus einer Hauptfarbe: Primärfarbe, Hintergründe, Text, Kopfzeile, Icons, Regler und Badges
Choose how strongly the backgrounds are tinted and the accent (same, neighbouring hue, opposite hue, triad)
Wählbar: Stärke der Hintergrundtönung und Akzentfarbe (gleiche, benachbarter Farbton, Gegenfarbe, Dreiklang)
Text is checked with the WCAG contrast rule (7:1 main text, 4.5:1 secondary text and text on primary), so the main color may be nudged
Texte werden mit der WCAG-Kontrastregel geprüft (7:1 Haupttext, 4,5:1 Nebentext und Text auf Primärfarbe), die Hauptfarbe kann daher leicht angepasst werden
Borders, shadows, fonts and status colors stay
Rahmen, Schatten, Schrift und Statusfarben bleiben

309 variables in 26 groups

309 Variablen in 26 Gruppen

The CSS variable name is printed below every field. Among others:

Unter jedem Feld steht der CSS-Variablenname. Unter anderem:

base colors, backgrounds, dashboard background (color, gradient or image), text
Grundfarben, Hintergründe, Dashboard-Hintergrund (Farbe, Verlauf oder Bild), Text
header, sidebar, cards, states
Kopfzeile, Seitenleiste, Cards, Zustände
state colors for devices, climate, security and weather; status colors
Zustandsfarben für Geräte, Klima, Sicherheit und Wetter; Statusfarben
tables and inputs, dialogs, code editor, sliders and badges
Tabellen und Eingaben, Dialoge, Code-Editor, Regler und Badges
typography, chart colors, energy, switches
Schrift, Diagrammfarben, Energie, Schalter
Home Assistant's design tokens (text, surfaces, borders, fills, corners, shadows)
Design-Tokens von Home Assistant (Text, Flächen, Rahmen, Füllungen, Ecken, Schatten)

Good to know

Gut zu wissen

Dark and light are stored separately. A switch decides which one is edited; “Copy to light / dark” takes one over to the other, “Clear this mode” empties it.
Dunkel und Hell werden getrennt gespeichert. Ein Schalter bestimmt den bearbeiteten Modus; „Nach Hell/Dunkel kopieren“ überträgt den einen in den anderen, „Diesen Modus leeren“ löscht ihn.
Empty = untouched. Only filled fields end up in the theme; everything else keeps the value Home Assistant brings along.
Leer = unverändert. Nur ausgefüllte Felder landen im Theme; alles andere behält den Wert von Home Assistant.
Preview: three mock cards — a dashboard, a settings page and a dialog with a code editor — show the mode being edited, font, scale and weight included. On a wide screen it stays anchored while the fields scroll.
Vorschau: drei nachgebaute Karten — Dashboard, Einstellungsseite und Dialog mit Code-Editor — zeigen den bearbeiteten Modus, Schriftart, Skalierung und Stärke eingeschlossen. Auf breiten Bildschirmen bleibt sie stehen, während die Felder scrollen.
Border and radius of the cards can be set per side and per corner, like the sidebar entries.
Rahmen und Eckenradius der Karten lassen sich je Seite und je Ecke festlegen, wie bei den Einträgen der Seitenleiste.
Card shadow: designed with templates and sliders instead of CSS.
Kartenschatten: mit Vorlagen und Reglern statt mit CSS gestaltet.
Primary scale (--ha-color-primary-05 … 95) is computed automatically, like Home Assistant does for its default theme.
Primärfarben-Abstufung (--ha-color-primary-05 … 95) berechnet die Integration automatisch, wie Home Assistant beim Standard-Theme.

Export & Import

Export writes the theme as a .yaml file, ready for configuration.yaml.
Export speichert das Theme als .yaml-Datei, fertig für die configuration.yaml.
Import reads an export from here, a file from the themes folder, or the themes block of a configuration.yaml. Only the variables above are taken over, the rest is counted. A four value border or radius is split back into its fields; with several themes in the file you pick one.
Import liest einen Export von hier, eine Datei aus dem themes-Ordner oder den themes-Block einer configuration.yaml. Übernommen wird nur, was oben aufgeführt ist, der Rest wird gezählt. Ein vierfacher Rahmen- oder Eckenwert wird wieder auf die Felder verteilt; bei mehreren Themes in der Datei wählst du eines aus.

The theme is only published once “Register the theme in Home Assistant” is switched on. “Use it as the default theme right away” additionally sets it for everybody who follows the theme selected by the server.

Veröffentlicht wird das Theme erst mit „Theme in Home Assistant eintragen“. „Gleich als Standard-Theme verwenden“ setzt es zusätzlich für alle, die dem vom Server gewählten Theme folgen.

Technical detailsTechnische Details

Lengths may be entered as a plain number; the unit px is added where CSS needs one.
Längen dürfen als blanke Zahl eingetragen werden; die Einheit px wird ergänzt, wo CSS eine braucht.
The rgb-* variables for transparent colors do not appear in the theme — Home Assistant derives them from every hex value.
Die rgb-*-Variablen für transparente Farben stehen nicht im Theme — Home Assistant leitet sie aus jedem Hex-Wert ab.
The theme lives in .storage, not in configuration.yaml. frontend.reload_themes replaces the whole theme list with the YAML; HA Style Hub notices that and registers its theme again by itself.
Das Theme liegt im .storage, nicht in der configuration.yaml. frontend.reload_themes ersetzt die komplette Theme-Liste durch die YAML; HA Style Hub merkt das und trägt sein Theme selbstständig wieder ein.

Options in detail

Optionen im Detail

Layout

Option	Default	Description
Option	Standard	Beschreibung
`columns`	2	Columns while the sidebar is expanded (1–4).
`columns`	2	Spalten im ausgeklappten Zustand (1–4).
`columns_collapsed`	1	Columns while the sidebar is collapsed (1–3). Needs a wider collapsed sidebar for more than 1.
`columns_collapsed`	1	Spalten im eingeklappten Zustand (1–3). Für mehr als 1 muss die eingeklappte Breite erhöht werden.
`item_style`	auto	`auto` uses tiles from 2 columns on, `tile` always, `row` never.
`item_style`	auto	`auto` nutzt Kacheln ab 2 Spalten, `tile` immer, `row` nie.
`gap`	6	Gap between the cells in px.
`gap`	6	Abstand zwischen den Zellen in px.
`width` / `width_collapsed`	256 / 56	Sidebar width in px for both states.
`width` / `width_collapsed`	256 / 56	Breite der Seitenleiste in px für beide Zustände.
`tile_height` / `row_height`	74 / 40	Height of a cell in the tile and in the row look.
`tile_height` / `row_height`	74 / 40	Höhe einer Zelle in der Kachel- bzw. Zeilenansicht.
`merge_fixed`	on	Move Settings, Notifications and the user entry into the grid.
`merge_fixed`	an	Einstellungen, Benachrichtigungen und Profil ins Raster übernehmen.

Per entry

Pro Eintrag

Name and icon are empty by default, which means “keep whatever Home Assistant uses”. The column span can never exceed the number of columns of the current state.

Name und Icon sind standardmäßig leer, das bedeutet „übernehmen, was Home Assistant vorgibt“. Die Spaltenbreite kann nie größer werden als die Spaltenzahl des aktuellen Zustands.

Custom CSS

Eigenes CSS

The box Additional CSS (Sidebar › Appearance) takes free CSS that is inserted into the shadow root of ha-sidebar. :host is the sidebar itself, entries can be addressed by their key:

Die Box Zusätzliches CSS (Sidebar › Aussehen) nimmt freies CSS auf, das in den Shadow Root von ha-sidebar eingefügt wird. :host ist die Seitenleiste selbst, Einträge lassen sich über ihren Schlüssel ansprechen:

/* every entry */
ha-list-item-button { text-transform: uppercase; }

/* one dashboard */
[data-sh-key="panel:lovelace"] {
  outline: 2px solid var(--accent-color);
}

/* the user entry */
[data-sh-key="profile"] ha-user-badge { filter: grayscale(1); }

/* only while the sidebar is expanded */
:host([expanded]) .panels-list { padding-top: 16px; }

Key	Entry
Schlüssel	Eintrag
`panel:<url_path>`	a dashboard or panel, e.g. `panel:energy`
`panel:<url_path>`	ein Dashboard oder Panel, z. B. `panel:energy`
`config`	Settings
`config`	Einstellungen
`notifications`	Notifications
`notifications`	Benachrichtigungen
`profile`	the user entry
`profile`	der Benutzereintrag

How it works

Funktionsweise

HA Style Hub has two halves:

HA Style Hub besteht aus zwei Hälften:

🐍 Python backendPython-Backend

keeps the configuration in .storage
hält die Konfiguration in .storage
serves it over the websocket API (ha_style_hub/get, save, reset)
stellt sie über die Websocket-API bereit (ha_style_hub/get, save, reset)
delivers the two JavaScript files
liefert die beiden JavaScript-Dateien aus

🧩 Frontend moduleFrontend-Modul

is loaded on every page
wird auf jeder Seite geladen
walks the shadow DOM down to ha-sidebar
hangelt sich durch den Shadow DOM bis zur ha-sidebar
adopts generated stylesheets into the relevant shadow roots
hängt generierte Stylesheets in die betroffenen Shadow Roots ein

The order is not produced by moving DOM nodes. The entries are laid out in a CSS grid and sorted with the order property, so Home Assistant's own rendering stays intact and survives every re-render without further work. The three fixed entries join the grid because the containers between them and the grid are set to display: contents.

Die Reihenfolge entsteht nicht durch Verschieben von DOM-Knoten. Die Einträge liegen in einem CSS-Grid und werden über die Eigenschaft order sortiert. So bleibt das Rendering von Home Assistant unangetastet und übersteht jedes Neuzeichnen von selbst. Die drei festen Einträge landen im Raster, weil die Container dazwischen auf display: contents gesetzt werden.

After saving, the backend fires the event ha_style_hub_updated, so every open browser picks up the new configuration without a reload.

Nach dem Speichern feuert das Backend das Ereignis ha_style_hub_updated, sodass jeder offene Browser die neue Konfiguration ohne Neuladen übernimmt.

Thanks to UIX: the way the stylesheets get into the shadow roots at the right moment — wait for customElements.whenDefined, then hook the element's updated method — follows the approach of UIX, the successor of card-mod. Many thanks to its author for the groundwork. UIX does not have to be installed.

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.

FAQ

The sidebar does not change at allDie Seitenleiste ändert sich überhaupt nicht

Reload the page with a hard refresh so the browser picks up the new module. Switch on the debug output under Sidebar › Layout › HA Style Hub Settings and look for [HA Style Hub] in the browser console — there is a line per area ([sidebar], [theme], [header], [settings]).

Die Seite mit einem harten Neuladen aktualisieren, damit der Browser das Modul neu holt. Unter Sidebar › Layout › HA Style Hub Settings die Debug-Ausgaben aktivieren und in der Browser-Konsole nach [HA Style Hub] schauen — je Bereich gibt es eine Zeile ([sidebar], [theme], [header], [settings]).

Settings and the user entry stay at the bottomEinstellungen und Profil bleiben unten

Switch on “Move Settings, Notifications and the user entry into the grid” in the Layout tab.

Im Reiter Layout die Option „Einstellungen, Benachrichtigungen und Profil ins Raster übernehmen“ aktivieren.

Is it per user?Gilt das pro Benutzer?

No. HA Style Hub stores one configuration for the whole installation. Hiding entries is a layout choice, not a permission — Home Assistant's own admin rules still apply.

Nein. HA Style Hub speichert eine Konfiguration für die gesamte Installation. Das Ausblenden von Einträgen ist eine Layout-Entscheidung und keine Berechtigung — die Admin-Regeln von Home Assistant gelten weiterhin.

Does it collide with custom-sidebar?Kollidiert es mit custom-sidebar?

Both tools patch the same element. Use only one of them at a time.

Beide Werkzeuge greifen dasselbe Element an. Immer nur eines von beiden verwenden.

How do I get back to the stock sidebar?Wie komme ich zur Originalseitenleiste zurück?

Switch off “HA Style Hub active” on the Info page (the i icon at the top right of the panel), or remove the integration entirely.

Auf der Seite Info (das i-Symbol oben rechts im Panel) die Option „HA Style Hub aktiv“ abschalten oder die Integration ganz entfernen.