Depuis la version 0.89, Home Assistant permet de créer des thèmes pour personnaliser l’interface Lovelace. L’installation est similaire sur Raspberry Pi et le Docker Hassio pour NAS Synology. Cela ne prend que quelques minutes et change vraiment l’aspect de l’interface de Home Assistant. La communauté d’utilisateurs étant vraiment très active, on trouve un grand nombre de thème pour tous les goûts.

Il est également possible d’installer très facilement des thèmes (et des composants) à l’aide de l’extension Home Assistant Community Store (HACS).

Récupérer des thèmes pour Home Assistant

Il n’existe pas de dépôt officiel ni d’add-on permettant de trouver simplement des thèmes. Il faut chercher un peu partout sur le forum, GitHub ou Home Assistant Awesome pour trouver des thèmes. Voici les principales sources. N’hésitez pas à utiliser les commentaires pour me signaler d’autres sources intéressantes

Pour ce tutoriel, nous utiliserons les thèmes gérés par Maarten Paauw. Aller sur GitHub et cliquer sur Clone or Download puis Download ZIP pour récupérer l’archive contenant tous les thèmes. Décompressez l’archive avec votre logiciel favori.

Un exemple de thème

Comme d’habitude avec Home Assistant, tout se fait à l’aide d’un fichier de configuration au format YAML. Voici le script du thème Amoled.

Ce qu’il faut retenir :

• L’étiquette permet de définir le nom du thème. Attention, pas de caractères accentués, d’espaces ou de caractères spéciaux
• Les principaux styles disponibles sont listés ici.
• Chaque style définit une couleur d’affichage. On pourra indiquer la couleur par son code Hexa. On trouve des dizaines de sélecteurs de couleur en ligne comme celui-ci. On pourra appliquer un couleur à plusieurs styles à l’aide de la commande var(–NOM_DE_LA_COULEUR)

amoled:
  primary-color: "#484A4C"
  accent-color: "#E45E65"
  dark-primary-color: "var(--accent-color)"
  light-primary-color: "var(--accent-color)"
  primary-text-color: "#FFFFFF"
  text-primary-color: "var(--primary-text-color)"
  secondary-text-color: "#5294E2"
  disabled-text-color: "#7F848E"
  label-badge-border-color: "green"
  primary-background-color: "#000000"
  secondary-background-color: "#383C45"
  sidebar-text-color: "var(--primary-color)"
  sidebar-icon-color: "var(--primary-color)"
  sidebar-selected-text-color: "var(--primary-text-color)"
  sidebar-selected-icon-color: "var(--primary-text-color)"
  divider-color: "rgba(0, 0, 0, .12)"
  table-row-background-color: "#353840"
  table-row-alternative-background-color: "#3E424B"
  paper-listbox-color: "#FFFFFF)"
  paper-listbox-background-color: "#000000"
  paper-grey-50: "var(--primary-text-color)"
  paper-grey-200: "#414A59"
  paper-card-header-color: "var(--accent-color)"
  paper-card-background-color: "#000000"
  paper-dialog-background-color: "#000000"
  paper-item-icon-color: "var(--primary-text-color)"
  paper-item-icon-active-color: "#F9C536"
  paper-item-icon_-_color: "green"
  paper-item-selected_-_background-color: "#434954"
  paper-tabs-selection-bar-color: "green"
  label-badge-red: "var(--accent-color)"
  label-badge-text-color: "var(--primary-text-color)"
  label-badge-background-color: "#2E333A"
  paper-button-ink-color: "#5294E2"
  paper-button-color: "#5294E2"
  paper-toggle-button-checked-button-color: "var(--accent-color)"
  paper-toggle-button-checked-bar-color: "var(--accent-color)"
  paper-toggle-button-checked-ink-color: "var(--accent-color)"
  paper-toggle-button-unchecked-button-color: "var(--disabled-text-color)"
  paper-toggle-button-unchecked-bar-color: "var(--disabled-text-color)"
  paper-toggle-button-unchecked-ink-color: "var(--disabled-text-color)"
  paper-slider-knob-color: "var(--accent-color)"
  paper-slider-knob-start-color: "var(--accent-color)"
  paper-slider-pin-color: "var(--accent-color)"
  paper-slider-active-color: "var(--accent-color)"
  paper-slider-container-color: "linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat"
  paper-slider-secondary-color: "var(--secondary-background-color)"
  paper-slider-disabled-active-color: "var(--disabled-text-color)"
  paper-slider-disabled-secondary-color: "var(--disabled-text-color)"
  google-red-500: "#E45E65"
  google-green-500: "#39E949"
  card-background-color: var(--paper-card-background-color)

Installer des thèmes sur l’image Docker Hassio pour Raspberry Pi

Depuis que Home Assistant est livré sous la forme d’une image à copier sur une carte microSD pour le Raspberry Pi, il est plus difficile d’installer de nouveaux fichiers. La console d’administration en ligne de commande (CLI) de l’image peut rebuter les débutant et les anglophobes. Voici comment faire.

Installer l’Add-on (plugin) Samba Share

Pour accéder facilement aux fichiers de Home Assistant à distance, le plus facile est d’installer l’add-on Samba Share. Ce plugin permet d’accéder aux fichiers du Raspberry Pi depuis un PC Windows depuis l’explorateur de fichiers ou d’un Mac depuis le Finder.

Ouvrez le Superviseur

Ouvrez l’onglet Add-on Store et faites une recherche sur le mot clé samba.

Cliquer sur la carte du plugin et lancer l’installation (install)

Une fois l’installation terminée, ouvrez l’onglet configuration et modifiez les paramètres suivants :

• username utilisateur. Sans caractères accentués ni d’espaces
• password mot de passe de connexion à Samba

Cliquez sur Save pour enregistrer la configuration

Cocher Start on Boot et Auto update puis démarrer le Samba en cliquant sur Start

Ouvrez le journal (log) pour vérifier que tout se passe bien. Vous pouvez également connaître le nom du dossier de partage qui va apparaître dans l’explorateur de fichier ou le Finder.

Ouvrez le dossier config avec Samba

Une fois que le service Samba est correctement démarré, quelques instants après le démarrage du service, vous devriez voir apparaître un nouveau dossier sur le réseau nommé homeassistant.

Ouvrez ce dossier en indiquant votre nom d’utilisateur et éventuellement le mot de passe (conseillé)

Allez dans le dossier config et créez un nouveau répertoire nommé themes (sans accent). Collez les thèmes précédemment récupérés sur GitHub dans ce nouveau dossier.

Installer des thèmes pour Hassio sur un NAS Synology

Pour les utilisateurs de Home Assistant sur NAS Synology, l’installation des thèmes est beaucoup plus facile. Connectez-vous au NAS depuis le gestionnaire de fichier sous Windows ou le Finder sur macOS. Tous les fichiers de configuration du container Docker Hassio sont stockés dans un dossier partagé.

Ouvrez le dossier partagé (ici HASS) et naviguer jusqu’au dossier homeassistant, c’est le dossier config !. Créez un nouveau dossier themes (sans accents)

Copiez les fichiers des thèmes précédemment récupérés sur GitHub dans ce nouveau dossier. C’est tout !

Modifier le fichier configuration.yaml

Maintenant que les thèmes sont installés dans le dossier config, il ne reste plus qu’à les déclarer dans le fichier configuration.yaml. Pour cela, vous pouvez utiliser l’add-on Visual Studio Code sur un NAS ou un éditeur de code (NodePad++, sublimetext…) sur PC ou macOS.

Coller à la fin du fichier ce nouveau bloc. Attention à respecter les 2 espaces avant themes (formalisme YAML)

frontend:
  themes: !include_dir_merge_named themes

Enregistrer et redémarrer Home Assistant en allant dans Configuration -> Contrôle du Serveur -> Redémarrer (en bas de la page)

Changer de thème

La sélection du thème se fait depuis le menu utilisateur. Cliquez sur l’icône utilisateur situé en bas de la barre latérale. Sélectionner le thème dans la liste. Le thème est appliqué à chaud sans avoir à redémarrer ou actualiser l’affichage.

Et voilà, c’est aussi simple que ça !

D’autres tutoriels et projets pour exploiter tout le potentiel de Home Assistant

Mises à jour

18/06/2020Publication du tutoriel

Avez-vous aimé cet article ?