Personnaliser l’interface avec HACS et Catppuccin

Dernière mise à jour:

Introduction

Home Assistant est une plateforme domotique et IoT open source. HACS (Home Assistant Community Store) permet d’installer des intégrations personnalisées, composants de tableaux de bord et thèmes maintenus par la communauté pour étendre les fonctions et personnaliser l’interface.

Les tutoriels précédents ont déployé Home Assistant Container sur reComputer RK3576 et créé un tableau de bord de température et d’humidité avec Modbus TCP. Nous installons ici HACS, appliquons Catppuccin Theme et vérifions que la page de surveillance reste utilisable.

Container n’inclut pas la gestion intégrée des Apps (anciennement Add-ons) de Home Assistant OS / Supervised, mais prend en charge HACS. HACS n’est pas un magasin d’Apps et n’ajoute pas Supervisor. La configuration est gérée par SSH et commandes Docker.

Préparation

Matériel

  • Un reComputer RK3576 sous Linux ARM64 avec une connexion réseau fonctionnelle.
  • Un ordinateur Windows, macOS ou Linux pour SSH et le navigateur.
  • Un accès réseau à GitHub et au site de téléchargement HACS.

Logiciels

ÉlémentEnvironnement testé
CartereComputer RK3576
SystèmeArmbian (Debian 12 Bookworm, ARM64)
Installation Home AssistantHome Assistant Container (Docker)
Nom du conteneurhomeassistant
Répertoire de configuration/home/seeed/homeassistant/config/
HACS2.0.5
Catppuccin Themev2.1.3
Accès webhttp://<RK3576_IP>:8123

Terminez d’abord l’installation Docker et la configuration initiale de Installer Home Assistant sur reComputer RK3576. Pour afficher la température et l’humidité, vous pouvez aussi suivre Intégrer Modbus TCP à Home Assistant. Modbus n’est pas obligatoire.

Le chemin /home/seeed/homeassistant/config/ correspond au compte d’exemple seeed. Si votre utilisateur ou montage diffère, utilisez le chemin réel.

Vérifiez le conteneur depuis le terminal RK3576 :

bash
sudo docker ps --filter name=homeassistant

Le conteneur homeassistant doit afficher l’état Up.

Facultatif : Sauvegarder la configuration

Avant d’ajouter des composants, sauvegardez la configuration et les données du tableau de bord. Ces commandes arrêtent brièvement Home Assistant pour obtenir une sauvegarde cohérente :

bash
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"

L’archive contient le répertoire de configuration, pas les fichiers indépendants ailleurs, comme le simulateur Modbus. Copiez-la sur votre ordinateur ou un stockage externe plutôt que de la conserver uniquement sur RK3576. Pour une sauvegarde chiffrée créée dans l’interface web, conservez aussi sa clé de chiffrement en sécurité.

Installer HACS dans Home Assistant Container

Étape 1 : Entrer dans le conteneur Docker

Connectez-vous par SSH et exécutez :

bash
sudo docker exec -it homeassistant bash

Vérifiez le chemin de configuration dans le conteneur :

bash
pwd

Le répertoire de travail est généralement /config.

Étape 2 : Exécuter le script officiel HACS

Exécutez dans le conteneur :

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

Le script télécharge HACS dans le répertoire des intégrations personnalisées. La commande provient des instructions officielles pour Container. Vérifiez que vous faites confiance au domaine et au réseau avant l’exécution.

Vérifiez le fichier après l’installation :

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

Si manifest.json existe, les fichiers HACS sont dans le répertoire de configuration. Ce fichier seul ne confirme pas l’autorisation web ; poursuivez la configuration de l’intégration.

Étape 3 : Redémarrer Home Assistant

Quittez le conteneur :

bash
exit

Exécutez dans le terminal de l’hôte RK3576 :

bash
sudo docker restart homeassistant

Une fois redémarré, ouvrez :

text
http://<RK3576_IP>:8123

Configurer HACS dans l’interface web

Étape 4 : Ajouter l’intégration HACS

  1. Ouvrez Settings → Devices & services.
  2. Sélectionnez Add integration en bas à droite.
  3. Recherchez HACS et sélectionnez l’intégration. Si elle manque, effectuez une actualisation forcée et vérifiez le redémarrage du conteneur.
  4. Lisez les quatre déclarations HACS concernant les journaux, l’absence d’Add-ons, la compatibilité et le dépannage. Cochez-les après les avoir comprises et sélectionnez Submit.

Ajouter l’intégration HACS

Étape 5 : Autoriser via GitHub

HACS accède aux dépôts communautaires par l’autorisation de périphérique GitHub :

  1. Home Assistant affiche Waiting for device activation et un code XXXX-XXXX.
  2. Gardez le dialogue ouvert et ouvrez https://github.com/login/device dans une autre page.
  3. Connectez-vous à votre compte GitHub, saisissez le code et sélectionnez Continue.
  4. Suivez les instructions puis sélectionnez Authorize HACS.
  5. Revenez à Home Assistant, attendez l’autorisation et terminez les options éventuelles, comme la région.

Le code sert uniquement à l’autorisation actuelle. Ne publiez pas de codes, jetons d’accès ou clés de sauvegarde dans les captures du wiki. Si le code expire, recommencez la configuration HACS pour en obtenir un nouveau.

Autoriser HACS via GitHub

Étape 6 : Confirmer l’installation HACS

Ouvrez Settings → Devices & services → Integrations → HACS pour afficher l’intégration configurée.

La page HACS permet alors de consulter les dépôts communautaires et les composants téléchargés.

Confirmer l’installation HACS

Actualisez Home Assistant. Une entrée HACS apparaît normalement dans la barre latérale.

Installer Catppuccin avec HACS

Étape 7 : Vérifier la configuration des thèmes

Exécutez par SSH sur l’hôte RK3576 :

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

Confirmez que le fichier contient :

yaml
frontend:
  themes: !include_dir_merge_named themes

Si frontend: existe, n’ajoutez pas une seconde clé frontend:. Ajoutez ou conservez themes: sous la clé existante. Ces lignes peuvent déjà figurer dans la configuration du tutoriel Container.

Enregistrez puis lancez la vérification officielle :

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

Redémarrez uniquement lors du premier ajout ou de la modification du répertoire des thèmes dans configuration.yaml :

bash
sudo docker restart homeassistant

Étape 8 : Télécharger Catppuccin Theme

  1. Sélectionnez HACS dans la barre latérale.
  2. Recherchez Catppuccin et sélectionnez Catppuccin Theme.
  3. Sélectionnez Download pour confirmer la version.
  4. Conservez la version recommandée par défaut (v2.1.3 lors du test) et sélectionnez DOWNLOAD en bas à droite.

L’interface testée affichait ce chemin :

text
/config/themes/catppuccin/catppuccin.yaml

Télécharger Catppuccin Theme avec HACS

“Need a different version?” permet de choisir une autre version. La première installation ne nécessite généralement pas de sélectionner manuellement une version ancienne.

Étape 9 : Recharger les thèmes

Après le téléchargement, ouvrez :

Settings → Tools → Actions

Exécutez cette action :

text
frontend.reload_themes

Les thèmes se rechargent sans redémarrage du conteneur. Si l’action manque, exécutez sudo docker restart homeassistant puis actualisez le navigateur.

Étape 10 : Sélectionner Catppuccin Mocha

  1. Sélectionnez l’avatar en bas à gauche pour ouvrir Profile.
  2. Ouvrez la liste Theme.
  3. Sélectionnez Catppuccin Mocha.
  4. L’interface passe normalement immédiatement au thème sombre.

Les styles proposés :

ThèmeStyle
Catppuccin LatteClair, adapté aux environnements lumineux
Catppuccin FrappéPalette sombre gris-bleu douce
Catppuccin MacchiatoPalette gris-bleu foncé
Catppuccin MochaPalette sombre violet-bleu adaptée aux écrans de surveillance
Catppuccin Auto Latte MochaChange le style selon le mode clair/sombre

Résultats

Après application de Catppuccin Mocha sur RK3576, le tableau de bord Modbus TCP existant adopte une palette sombre. Les jauges et les graphiques historiques restent visibles.

Thème sombre Catppuccin Mocha sur reComputer RK3576

Si vous avez terminé le tutoriel Modbus TCP, ouvrez RK3576 Modbus Monitoring dans la barre latérale. Le thème modifie l’apparence sans changer les adresses des registres ni la collecte des données.

La démonstration suivante montre le tableau de bord avant le changement de thème, comme référence des fonctions existantes. Elle ne montre pas le thème sombre.

Tableau de bord Modbus TCP avant le changement de thème

Questions fréquentes

Catppuccin manque dans le profil après le téléchargement

  1. Vérifiez que configuration.yaml contient frontend: themes: !include_dir_merge_named themes avec la bonne indentation YAML.
  2. Vérifiez /config/themes/catppuccin/catppuccin.yaml ; utilisez le chemin réellement indiqué dans HACS.
  3. Exécutez frontend.reload_themes. Redémarrez le conteneur et actualisez le navigateur si nécessaire.

Résumé

Ce tutoriel couvre l’installation HACS, l’autorisation GitHub, le téléchargement de thèmes communautaires et la sélection du thème sombre dans Home Assistant Container sur RK3576. Il peut servir de nœud Modbus TCP et de plateforme AIoT locale dotée d’une interface web extensible.

Pour aller plus loin, utilisez des cartes HACS compatibles avec votre version ou des intégrations natives pour les éclairages, caméras et autres appareils. Évaluez la maintenance et la compatibilité des composants tiers.

Références