Material You Theme in Home Assistant: Installation, Konfiguration, Praxistipps

Material Design ist Googles Designsprache. 2014 vorgestellt, hat sie inzwischen drei große Iterationen durchlaufen. Die Grundidee: Eine einheitliche visuelle Sprache, die sich an realen Materialien orientiert. Schatten zeigen Hierarchie. Bewegungen folgen physikalischen Prinzipien. Komponenten verhalten sich vorhersehbar.

Material Design steckt überall, wo Google die Finger im Spiel hat. Gmail, Maps, der Play Store, das gesamte Android-System. Wer ein modernes Android-Smartphone nutzt, kennt die Optik. Abgerundete Karten. Bestimmte Schriftgrößen für bestimmte Hierarchieebenen. Floating Action Buttons. Snackbars am unteren Bildschirmrand.

Material Design 3 ist die aktuelle Version. Sie wurde 2021 mit Android 12 eingeführt und seitdem mehrfach erweitert. Der größte Sprung kam mit der Spezifikation von Material 3 Expressive im Mai 2025 – einer Aktualisierung, die federnde Animationen, kräftigere Farben und überarbeitete Komponenten brachte. Diese Designsprache prägt heute auch die Optik von Android 16.

Material You ist die Personalisierungsschicht über Material Design 3. Das Kernprinzip: Dein Gerät kennt dich und passt sich an. Konkret bedeutet das, dass Android 12 und neuer eine Akzentfarbe aus deinem Wallpaper ableitet. Diese Farbe zieht sich dann durch das ganze System. Tastatur, Einstellungen, App-Icons – alles greift die Wallpaper-Farben auf.

Hinter dieser scheinbar simplen Funktion steckt einiges an Mathematik. Google hat dafür die Material Color Utilities entwickelt. Sie nehmen eine Basisfarbe und generieren daraus eine komplette Farbpalette mit Dutzenden abgestufter Töne. Primärfarbe, Sekundärfarbe, Akzente, Hintergründe für helles und dunkles Theme. Alles harmonisch aufeinander abgestimmt.

Für Home Assistant ist das spannend. Denn das Dashboard ist die zentrale Anlaufstelle für dein Smart Home. Es läuft auf dem Handy. Es läuft auf dem Tablet im Flur. Vielleicht auch auf einem Wandpanel. Wenn das Frontend optisch zum Rest deines Ökosystems passt, fühlt es sich nicht mehr wie ein Fremdkörper an. Sondern wie ein integraler Teil deiner Geräte.

Das Material You Theme bildet diese komplette Designsprache in Home Assistant ab. Es übersetzt die Material-Design-3-Tokens in CSS-Variablen. Das Companion-Modul ergänzt das um die dynamische Farbgenerierung – mit denselben Material Color Utilities, die auch Google selbst verwendet.

Sichtbarste Änderung auf Mobile: Auf kleinen Displays wandern die View-Tabs an den unteren Bildschirmrand und verhalten sich wie eine echte Material-3-Navigation-Bar. Auf breiteren Displays (ab etwa 870 Pixel) bleiben sie horizontal sichtbar. Auf Non-Sections-Views wird zudem der klassische Plus-Button zum Hinzufügen einer View durch einen Floating Action Button ersetzt, der unten rechts schwebt. Das macht das Dashboard auf dem Handy spürbar ergonomischer – Daumenreichweite statt Strecken zum oberen Rand.

Standard-Theme vs. Material You: Wo liegen die Unterschiede?

Damit du eine konkrete Vorstellung bekommst, wo das Theme das Frontend tatsächlich verändert, hier ein direkter Vergleich der wichtigsten Aspekte. Beide Optionen sind funktional gleichwertig – der Unterschied liegt in der Optik, der Konsistenz und den Anpassungsmöglichkeiten.

Material You besteht aus zwei separaten HACS-Komponenten. Das ist wichtig zu verstehen, weil viele Tutorials das nicht sauber trennen.

Material You Theme liefert die CSS-Grundlage. Eine Sammlung von Farbtokens, Schriftgrößen und Komponentenstilen. Du kannst das Theme alleine installieren und nutzen. Dann bekommst du den Material-You-Grundlook in einer festen Blautonpalette.

Material You Utilities ist das JavaScript-Modul. Es generiert dynamische Farbthemes aus einer beliebigen Basisfarbe. Außerdem überarbeitet es die Home-Assistant-Komponenten so, dass sie der Material-Design-3-Spezifikation folgen. Buttons werden runder. Karten bekommen Schatten. Snackbars verhalten sich anders.

Ohne Utilities verzichtest du auf die dynamische Farbgenerierung und die meisten Komponenten-Überarbeitungen – also auf den Großteil dessen, was Material You ausmacht. Der Entwickler empfiehlt deshalb selbst die Kombination beider Komponenten. So gehst du vor:

Theme installieren:

1. HACS öffnen
2. Nach Material You Theme suchen
3. Repository öffnen und Download klicken
4. Browser neu laden
5. Im eigenen Profil unter Browser-Einstellungen das Theme Material You auswählen

Wichtig: Das Theme muss auf Profilebene aktiviert sein. Setzt du es nur für ein einzelnes Dashboard, triggert das Companion-Modul später nicht. Eine häufige Fehlerquelle.

Utilities installieren:

1. In HACS nach Material You Utilities suchen
2. Repository öffnen und Download klicken
3. Die configuration.yaml öffnen und folgende Einträge ergänzen:

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /hacsfiles/material-you-utilities/material-you-utilities.min.js

panel_custom:
  - name: material-you-panel
    url_path: material-you-configuration
    sidebar_title: Material You Utilities
    sidebar_icon: mdi:material-design
    module_url: /hacsfiles/material-you-utilities/material-you-utilities.min.js

1. Home Assistant neu starten
2. Browser-Cache leeren und Seite neu laden

Nach dem Neustart erscheint in der Sidebar ein neuer Eintrag namens Material You Utilities. Das ist das Konfigurationspanel, mit dem du alle weiteren Einstellungen vornimmst. Außerdem siehst du sofort die überarbeiteten Komponenten. Buttons mit anderen Formen. Karten mit größeren Eckradien. Eine deutlich aufgeräumtere Optik.

Falls du nach dem Neustart keine Änderungen siehst: Cache leeren. Hartes Neuladen mit Strg+F5. In hartnäckigen Fällen die Home-Assistant-App komplett schließen und neu öffnen.

Das Konfigurationspanel ist das Herzstück der Utilities. Hier stellst du Basisfarbe, Schema und Kontrast ein. Drei Tabs gibt es als Administrator: You, Everyone und Devices.

Der You-Tab gilt für deinen eigenen Account. Egal von welchem Gerät du dich anmeldest, deine Einstellungen kommen mit. Everyone ist für alle anderen Nutzer und definiert gleichzeitig die globalen Standardwerte. Devices erlaubt gerätespezifische Einstellungen. Das Tablet in der Küche kann ein anderes Theme bekommen als das Handy in der Hand. Voraussetzung dafür ist Browser Mod, weil das Modul sonst keine eindeutigen Geräte-IDs hat.

Die wichtigsten Einstellungen findest du im Theme-Tab jeder Settings-Karte:

Base Color: Die Ausgangsfarbe. Standardmäßig ein dezentes Blau (#4C5C92). Über das Farbrad wählst du eine beliebige andere Farbe. Daraus generieren die Material Color Utilities das komplette Theme. Primär, Sekundär, Akzente, Hintergründe – alles automatisch.

Scheme Name: Das Farbschema bestimmt die Art, wie aus der Basisfarbe das Theme abgeleitet wird. Neun Schemata stehen zur Auswahl. Tonal Spot ist der Default und entspricht dem klassischen Android-12-Look. Expressive löst sich bewusst von der Quellfarbe und erzeugt überraschende Kombinationen. Vibrant dreht die Farbsättigung hoch. Neutral und Monochrome halten alles in Grautönen. Fruit Salad und Rainbow sind verspielte Varianten, bei denen die Ursprungsfarbe gar nicht im finalen Theme auftaucht.

Contrast Level: Ein Wert zwischen -1 und 1. Bestimmt, wie stark sich die Theme-Farben voneinander abheben. Niedriger Kontrast wirkt sanfter, hoher Kontrast verbessert die Lesbarkeit – wichtig für Wandpanels, die du auch mal aus drei Metern Entfernung ablesen willst.

Specification Version: Die spannendste Einstellung. Du wählst zwischen 2021 und 2025. Die 2025er Spezifikation aktiviert Material 3 Expressive mit den neuen Animationen und überarbeiteten Farbalgorithmen. Wenn du den modernen Look haben willst, ist das deine Wahl. Für den vollen Expressive-Effekt kombinierst du 2025 mit dem Expressive-Schema.

Platform: Nur sichtbar bei Spezifikation 2025. Wählt zwischen Phone und Watch. Lass das auf Phone, es sei denn, du baust ein Watch-Dashboard. Die Watch-Variante harmoniert nur schlecht mit hellem Modus.

Randnotiz zur Companion App: Die Android-App von Home Assistant kann den Material-You-Akzent deines Telefons als Sensor bereitstellen. Unter Einstellungen > Companion app > Sensoren verwalten findest du im Bereich Dynamic color den Sensor Accent color. Aktivierst du ihn, liefert er den Hex-Wert deiner Wallpaper-Farbe. Mit einer simplen Automation kannst du diesen Wert direkt an den input_text.material_you_base_color durchreichen. Ändert sich dein Wallpaper, ändert sich auch dein Home-Assistant-Theme. Das ist die einzige Stelle, an der dynamische Wallpaper-Farben wirklich live ins Dashboard wandern.

Neben den Theme-Einstellungen gibt es noch zwei weitere Tabs in jeder Settings-Karte: Styles und Other. Unter Styles regelst du, ob die Komponenten-Überarbeitungen aktiv sind, welcher Kartentyp standardmäßig verwendet wird (elevated, filled, outlined oder transparent), ob die App-Bar oben und die Navigationsleiste unten sichtbar bleiben. Unter Other findest du Optionen für harmonisierte semantische Farben, Quellbilder zur automatischen Farbableitung und eigene CSS-Dateien.

Mit den Standard-Einstellungen sieht dein Dashboard schon sehr nach Material You aus. Aber das Theme erlaubt deutlich mehr Tiefe.

Eigene Schriftart: Empfohlen wird Google Sans Flex, die Open-Source-Variante von Googles Product Sans. Ohne Installation greift das Theme auf eine Prioritätsliste mit Roboto Flex und Roboto zurück. Wenn du den Original-Google-Look willst, bindest du Google Sans Flex als Frontend-Resource ein. Im Dashboard-Editor unter Ressourcen verwalten ein neues Stylesheet hinzufügen mit der URL fonts.googleapis.com/css2. Cache leeren, fertig.

Quellbild als Farbgeber: Statt eine Basisfarbe manuell auszuwählen, kannst du auch ein Bild angeben. Lokal in config/www abgelegt oder als externe URL. Das Modul extrahiert daraus bis zu vier mögliche Basisfarben. Über einen Query-Parameter ?i=0 bis ?i=3 wählst du die gewünschte aus. Praktisch, wenn dein Dashboard zu einem bestimmten Foto oder einem Markenlogo passen soll.

Eigene CSS-Datei: Für maximale Kontrolle erstellst du dir mit dem Material Theme Builder ein statisches Farbtheme und gibst die exportierte CSS-Datei im Konfigurationspanel an. So überschreibst du gezielt einzelne Tokens. Wer es wirklich custom mag, findet hier seinen Spielplatz.

Harmonisierung semantischer Farben: Standardmäßig sind Rot für Warnungen, Grün für OK-Zustände und so weiter feste Farben. Aktivierst du die Harmonisierung, verschieben sich diese Farbtöne in Richtung deiner Primärfarbe. Ergebnis: Alles wirkt wie aus einem Guss. Gerade bei ungewöhnlichen Basisfarben ein deutlicher Gewinn.

Material Symbols: Eine eigene HACS-Erweiterung, die die Icons in Home Assistant gegen die aktuellen Material-Symbols-Icons austauscht. Damit sieht auch das letzte Detail nach Material 3 aus. Optional, aber stimmig.

Kartentypen: Über den Card-Type-Schalter im Styles-Tab setzt du den globalen Standard. Mit der Erweiterung UI eXtension kannst du einzelne Karten gezielt anders stylen. Filled für Akzent-Karten, transparent für eingebettete Elemente, outlined für ruhigere Bereiche. Das gibt dir die Möglichkeit, Hierarchien im Dashboard sauber zu setzen.

Sticky Cache bei Updates. Nach jedem Utilities-Update können hartnäckige Cache-Probleme auftreten. Symptome: Das Konfigurationspanel sieht alt aus. Änderungen greifen nicht. Komponenten bleiben im vorherigen Stil. Lösung: Browser-Cache leeren, alle Tabs schließen, Companion-App komplett beenden, neu starten. In Extremfällen hilft ein Inkognito-Tab als Test.

Alte Modul-URLs. Wer das Modul schon länger nutzt und früher mal eine andere Methode zur Einbindung hatte, sollte die configuration.yaml und die Frontend-Ressourcen prüfen. Mehrfache oder veraltete Verweise auf das JavaScript-Modul führen zu Konflikten. Alle alten Einträge raus, nur den aktuellen Pfad behalten.

iFrame-Limitierung ohne CSS-Datei. Setzt du das Theme nur klassisch über die Profil-Auswahl oder als Frontend-Ressource, werden iFrame-Bereiche wie die HACS-Seite oder Add-on-Seiten nicht mitgestylt. Diese Lücke schließt du, indem du im Konfigurationspanel der Utilities unter dem Tab Other eine eigene CSS-Datei einbindest. Dann gelten die Styles auch in den iFrames. Add-ons mit komplett eigener Frontend-Architektur können trotzdem aus dem Rahmen fallen – die meisten Standard-Integrationen werden aber sauber erfasst.

Browser Mod für Device-Settings. Wenn du gerätespezifische Themes nutzen willst, brauchst du zwingend Browser Mod als zusätzliche Integration. Ohne diese Erweiterung weiß das Modul nicht, welche User-Browser-Geräte-Kombination gerade aktiv ist. Der Devices-Tab im Panel bleibt dann leer.

Material Expressive verlangt aktuelle Versionen. Wer das alte Theme noch in Version 4.x nutzt, hat keinen Zugriff auf die Expressive-Spezifikation. Theme 5.0.0 oder höher und Utilities 2.0.0 oder höher sind Pflicht für die 2025er Spec. Aktuell sind Theme 5.0.9 (Stand März 2026) und Utilities 2.1.4. HACS aktualisiert das automatisch, aber wer manuell installiert hat, sollte hier nachziehen.

Kurz: Ja, wenn du regelmäßig in Home Assistant arbeitest und auf Optik Wert legst.

Das Dashboard wirkt nach der Umstellung deutlich aufgeräumter. Animationen sind weicher, Farben harmonieren, Karten haben Eckradien aus diesem Jahrzehnt. Auf einem Wand-Tablet macht das einen spürbaren Unterschied – aus einer technischen Oberfläche wird ein Stück Einrichtung.

Die dynamische Farbgenerierung ist mehr als Kosmetik. Wenn der Wallpaper-Akzent über die Companion App ins Dashboard wandert, fügt sich Home Assistant nahtlos ins Android-System ein. Ein Detail, das man unterschätzt, bis es einmal läuft.

Der Preis ist Zeit. Die Einrichtung umfasst HACS-Downloads, YAML-Einträge und ein Konfigurationspanel mit drei Tabs, vielen Optionen und einigen Cache-Eigenheiten. Bis die Kombination aus Basisfarbe, Schema und Kontrast wirklich passt, vergeht leicht eine Stunde. Nach Updates kommt gelegentlich ein hartnäckiger Browser-Cache dazu.

Für Standard-Nutzer, die das Dashboard nur selten öffnen, rechtfertigt das den Aufwand kaum. Wer täglich mit Home Assistant arbeitet, gewinnt dagegen ein Frontend, das nicht mehr nach Technik-Bastelei aussieht – sondern nach Produkt.

• Material You Theme auf GitHub
• Material You Utilities auf GitHub
• Material Symbols (Icon-Erweiterung)
• Material Theme Builder (Google)
• Community-Thread im Home-Assistant-Forum