Oberfläche mit HACS und Catppuccin anpassen

Zuletzt aktualisiert: 2026-10-16

Einführung

Home Assistant ist eine quelloffene Plattform für Hausautomatisierung und IoT. HACS (Home Assistant Community Store) ermöglicht die Installation von Community-Integrationen, Dashboard-Komponenten und Themes, um Funktionen und Oberfläche zu erweitern.

Die vorherigen Tutorials haben Home Assistant Container auf reComputer RK3576 bereitgestellt und ein Temperatur- und Feuchtigkeitsdashboard mit Modbus TCP erstellt. Hier installieren wir HACS, passen die Oberfläche mit Catppuccin Theme an und prüfen, ob die bestehende Überwachungsseite weiter nutzbar ist.

Container enthält nicht die integrierte Verwaltung von Apps (früher Add-ons) aus Home Assistant OS / Supervised, unterstützt aber HACS. HACS ist kein Apps-Store und ergänzt keinen Supervisor. Die Konfiguration erfolgt über SSH und Docker-Befehle.

Vorbereitung

Hardware

• Ein reComputer RK3576 mit ARM64 Linux und funktionierender Netzwerkverbindung.
• Ein Windows-, macOS- oder Linux-Computer für SSH und Browserzugriff.
• Netzwerkzugang zu GitHub und der HACS-Downloadseite.

Software

Schließe zunächst Docker-Installation und Ersteinrichtung in Home Assistant auf reComputer RK3576 installieren ab. Für das Temperatur- und Feuchtigkeitsdashboard kannst du auch Modbus TCP mit Home Assistant integrieren durchführen. Modbus ist hier nicht erforderlich.

Der Pfad /home/seeed/homeassistant/config/ verwendet den Beispielbenutzer seeed. Bei anderem Benutzernamen oder Konfigurations-Mount verwende den tatsächlichen Pfad.

Prüfe den Container im RK3576-Terminal:

sudo docker ps --filter name=homeassistant

Der Container homeassistant sollte den Status Up haben.

Optional: Aktuelle Konfiguration sichern

Sichere vor dem Hinzufügen eigener Komponenten die Konfiguration und Dashboard-Daten. Diese Befehle stoppen Home Assistant kurzzeitig, um eine konsistente Dateisicherung zu erstellen:

sudo docker stop homeassistant
sudo tar -czf "$HOME/homeassistant-config-backup.tar.gz" -C "$HOME/homeassistant" config
sudo docker start homeassistant
ls -lh "$HOME/homeassistant-config-backup.tar.gz"

Das Archiv enthält das Konfigurationsverzeichnis, nicht unabhängige Dateien an anderen Orten, etwa das Modbus-Simulatorskript. Kopiere die Sicherung auf den Computer oder einen externen Speicher. Bei verschlüsselten Sicherungen aus der Weboberfläche bewahre auch den Verschlüsselungsschlüssel sicher auf.

HACS in Home Assistant Container installieren

Schritt 1: Den Docker-Container öffnen

Verbinde dich per SSH und führe aus:

sudo docker exec -it homeassistant bash

Prüfe den Konfigurationspfad im Container:

pwd

Das Arbeitsverzeichnis ist normalerweise /config.

Schritt 2: Das offizielle HACS-Skript ausführen

Führe dies im Container aus:

set -o pipefail
wget -O - https://get.hacs.xyz | bash -

Das Skript lädt HACS in das Verzeichnis eigener Integrationen herunter. Der Befehl stammt aus der offiziellen Container-Anleitung. Prüfe vor der Ausführung, ob du Download-Domain und Netzwerk vertraust.

Prüfe anschließend die Datei:

ls -l /config/custom_components/hacs/manifest.json

Wenn manifest.json existiert, liegen die HACS-Dateien im Konfigurationsverzeichnis. Die Datei allein bestätigt keine Webautorisierung. Fahre mit der Integrationseinrichtung fort.

Schritt 3: Home Assistant neu starten

Verlasse den Container:

exit

Führe im Terminal des RK3576-Hosts aus:

sudo docker restart homeassistant

Öffne nach dem Neustart:

http://<RK3576_IP>:8123

HACS in der Weboberfläche konfigurieren

Schritt 4: Die HACS-Integration hinzufügen

1. Öffne Settings → Devices & services.
2. Wähle unten rechts Add integration.
3. Suche HACS und wähle die Integration. Fehlt sie, lade den Browser vollständig neu und bestätige den Containerneustart.
4. Lies die vier HACS-Hinweise zu Protokollen, fehlenden Add-ons, Drittanbieterkompatibilität und Fehlerbehebung. Bestätige sie nach dem Verständnis und wähle Submit.

Schritt 5: Über GitHub autorisieren

HACS nutzt GitHubs Geräteautorisierung für den Zugriff auf Community-Repositories:

1. Home Assistant zeigt Waiting for device activation und einen Code im Format XXXX-XXXX.
2. Lass den Dialog geöffnet und öffne https://github.com/login/device auf einer weiteren Seite.
3. Melde dich bei deinem GitHub-Konto an, gib den Code ein und wähle Continue.
4. Folge den Hinweisen und wähle Authorize HACS.
5. Kehre zurück, warte auf die Autorisierung und schließe gegebenenfalls weitere Optionen wie die Regionsauswahl ab.

Der Code dient nur dieser Autorisierung. Veröffentliche keine Codes, Zugriffstoken oder Sicherungsschlüssel in Wiki-Bildern. Bei Ablauf beginne die HACS-Einrichtung erneut, um einen neuen Code zu erhalten.

Schritt 6: Die HACS-Installation bestätigen

Öffne Settings → Devices & services → Integrations → HACS, um die konfigurierte Integration zu sehen.

Danach kannst du auf der HACS-Seite Community-Repositories und heruntergeladene Komponenten durchsuchen.

Aktualisiere Home Assistant. Normalerweise erscheint HACS in der Seitenleiste.

Catppuccin mit HACS installieren

Schritt 7: Die Theme-Konfiguration prüfen

Führe per SSH auf dem RK3576-Host aus:

sudo nano /home/seeed/homeassistant/config/configuration.yaml

Prüfe, ob die Datei Folgendes enthält:

frontend:
  themes: !include_dir_merge_named themes

Wenn frontend: bereits existiert, füge keinen weiteren frontend:-Schlüssel hinzu. Ergänze oder behalte themes: unter dem bestehenden Schlüssel. Die Container-Konfiguration kann diese Zeilen bereits enthalten.

Speichere und führe die offizielle Prüfung aus:

sudo docker exec homeassistant python -m homeassistant --script check_config --config /config

Ein Neustart ist nur beim erstmaligen Hinzufügen oder Ändern des Theme-Verzeichnisses in configuration.yaml erforderlich:

sudo docker restart homeassistant

Schritt 8: Catppuccin Theme herunterladen

1. Wähle HACS in der Seitenleiste.
2. Suche Catppuccin und wähle Catppuccin Theme.
3. Wähle Download zur Versionsbestätigung.
4. Behalte die empfohlene Standardversion (v2.1.3 im Test) und wähle unten rechts DOWNLOAD.

Die getestete Oberfläche zeigte diesen Speicherpfad:

/config/themes/catppuccin/catppuccin.yaml

“Need a different version?” dient der Auswahl einer anderen Version. Bei der Erstinstallation ist normalerweise keine manuelle Auswahl einer älteren Version nötig.

Schritt 9: Themes neu laden

Öffne nach dem Download:

Settings → Tools → Actions

Führe diese Aktion aus:

frontend.reload_themes

Damit werden Themes ohne Containerneustart geladen. Fehlt die Aktion, führe sudo docker restart homeassistant aus und aktualisiere den Browser.

Schritt 10: Catppuccin Mocha auswählen

1. Öffne Profile über den Benutzeravatar unten links.
2. Öffne das Dropdown Theme.
3. Wähle Catppuccin Mocha.
4. Die Oberfläche wechselt normalerweise sofort zum dunklen Theme.

Die Theme-Stile:

Ergebnisse

Nach Anwendung von Catppuccin Mocha auf RK3576 verwendet das bestehende Modbus-TCP-Dashboard eine dunkle Palette. Temperatur- und Feuchtigkeitsanzeigen sowie Verlaufsdiagramme bleiben sichtbar.

Nach Abschluss des Modbus-TCP-Tutorials öffne RK3576 Modbus Monitoring in der Seitenleiste. Das Theme ändert nur die Darstellung, nicht Registeradressen oder Datenerfassung.

Die folgende Demo zeigt das Dashboard vor dem Theme-Wechsel als Referenz für bestehende Funktionen. Sie zeigt nicht das dunkle Theme.

Häufige Fragen

Catppuccin fehlt nach dem Download in den Profileinstellungen

1. Prüfe, ob configuration.yaml korrekt eingerücktes frontend: themes: !include_dir_merge_named themes enthält.
2. Prüfe /config/themes/catppuccin/catppuccin.yaml; verwende den tatsächlichen HACS-Pfad.
3. Führe frontend.reload_themes aus. Starte den Container bei Bedarf neu und aktualisiere den Browser.

Zusammenfassung

Dieses Tutorial behandelt HACS-Installation, GitHub-Autorisierung, Download eines Community-Themes und Auswahl des dunklen Themes in Home Assistant Container auf RK3576. Das Gerät kann als Modbus-TCP-Überwachungsknoten und lokale AIoT-Plattform mit erweiterbarer Weboberfläche dienen.

Für weitere Anpassungen verwende mit deiner Version kompatible HACS-Karten oder native Integrationen für Beleuchtung, Kameras und andere Geräte. Prüfe Wartungszustand und Kompatibilität von Drittanbieterkomponenten.

Referenzen

• Seeed Wiki: Home Assistant auf reTerminal anpassen
• HACS: Download
• HACS: Ersteinrichtung
• Catppuccin for Home Assistant Repository
• Home Assistant: Themes neu laden
• Home Assistant: Frontend / Themes