Personalizar la interfaz con HACS y Catppuccin

Última actualización:

Introducción

Home Assistant es una plataforma de automatización doméstica e IoT de código abierto. HACS (Home Assistant Community Store) permite instalar integraciones, componentes de paneles y temas mantenidos por la comunidad para ampliar las funciones y personalizar la interfaz.

Los tutoriales anteriores desplegaron Home Assistant Container en reComputer RK3576 y crearon un panel de temperatura y humedad con Modbus TCP. Aquí instalamos HACS en el mismo dispositivo, personalizamos la interfaz con Catppuccin Theme y comprobamos que el panel existente sigue funcionando.

Container no incluye la gestión integrada de Apps (antes Add-ons) de Home Assistant OS / Supervised, pero admite HACS. HACS no es una tienda de Apps ni añade Supervisor a Container. La configuración se gestiona mediante SSH y comandos Docker.

Preparación

Hardware

  • Un reComputer RK3576 con Linux ARM64 y conexión de red operativa.
  • Un ordenador Windows, macOS o Linux para SSH y acceso mediante navegador.
  • Acceso de red a GitHub y al sitio de descarga de HACS.

Software

ElementoEntorno probado
PlacareComputer RK3576
Sistema operativoArmbian (Debian 12 Bookworm, ARM64)
Instalación de Home AssistantHome Assistant Container (Docker)
Nombre del contenedorhomeassistant
Directorio de configuración/home/seeed/homeassistant/config/
HACS2.0.5
Catppuccin Themev2.1.3
Acceso webhttp://<RK3576_IP>:8123

Completa primero la instalación Docker y la configuración inicial de Instalar Home Assistant en reComputer RK3576. Para mostrar el panel de temperatura y humedad, también puedes completar Integrar Modbus TCP con Home Assistant. Modbus no es obligatorio para este tutorial.

La ruta /home/seeed/homeassistant/config/ corresponde al usuario de ejemplo seeed. Si el usuario o el montaje de configuración difieren, utiliza la ruta real.

Comprueba el contenedor desde el terminal de RK3576:

bash
sudo docker ps --filter name=homeassistant

El contenedor homeassistant debe mostrar el estado Up.

Opcional: Crear una copia de seguridad

Antes de añadir componentes, guarda la configuración y los datos del panel. Estos comandos detienen brevemente Home Assistant para obtener una copia de archivos coherente:

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"

El archivo contiene el directorio de configuración, no archivos independientes ubicados en otras carpetas, como el simulador Modbus. Copia la copia de seguridad al ordenador o a un almacenamiento externo, en lugar de conservarla solo en RK3576. Si utilizas una copia cifrada desde la interfaz web, guarda también su clave de cifrado de forma segura.

Instalar HACS en Home Assistant Container

Paso 1: Entrar en el contenedor Docker

Conéctate a RK3576 mediante SSH y ejecuta:

bash
sudo docker exec -it homeassistant bash

Comprueba la ruta de configuración dentro del contenedor:

bash
pwd

El directorio de trabajo suele ser /config.

Paso 2: Ejecutar el script oficial de HACS

Ejecuta esto dentro del contenedor:

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

El script descarga HACS en el directorio de integraciones personalizadas. El comando procede de las instrucciones oficiales para Container. Confirma que confías en el dominio de descarga y la red antes de ejecutarlo.

Comprueba el archivo tras la instalación:

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

Si existe manifest.json, los archivos de HACS están en el directorio de configuración. El archivo por sí solo no confirma la autorización web; continúa con la configuración de la integración.

Paso 3: Reiniciar Home Assistant

Sal del contenedor:

bash
exit

Ejecuta en el terminal del host RK3576:

bash
sudo docker restart homeassistant

Cuando vuelva a funcionar, abre:

text
http://<RK3576_IP>:8123

Configurar HACS en la interfaz web

Paso 4: Añadir la integración HACS

  1. Abre Settings → Devices & services.
  2. Selecciona Add integration en la esquina inferior derecha.
  3. Busca HACS y selecciona la integración. Si no aparece, fuerza la recarga del navegador y confirma que reiniciaste el contenedor.
  4. Lee las cuatro indicaciones de HACS sobre registros, ausencia de Add-ons, compatibilidad de terceros y resolución de problemas. Marca las confirmaciones cuando las comprendas y selecciona Submit.

Añadir la integración HACS

Paso 5: Autorizar mediante GitHub

HACS accede a los repositorios mediante el flujo de autorización de dispositivos de GitHub:

  1. Home Assistant muestra Waiting for device activation y un código XXXX-XXXX.
  2. Mantén abierto el diálogo y abre https://github.com/login/device en otra página.
  3. Inicia sesión en tu cuenta GitHub, introduce el código y selecciona Continue.
  4. Sigue las indicaciones y selecciona Authorize HACS.
  5. Regresa a Home Assistant, espera a que finalice la autorización y completa opciones finales como la región, si aparecen.

El código solo sirve para la autorización actual. No publiques códigos, tokens de acceso ni claves de copia de seguridad en capturas del wiki. Si caduca, reinicia la configuración HACS para obtener uno nuevo.

Autorizar HACS mediante GitHub

Paso 6: Confirmar la instalación de HACS

Abre Settings → Devices & services → Integrations → HACS para ver la integración configurada.

Después de configurarlo, la página HACS permite consultar repositorios comunitarios y componentes descargados.

Confirmar la instalación HACS

Actualiza Home Assistant. Normalmente aparece HACS en la barra lateral.

Instalar Catppuccin con HACS

Paso 7: Comprobar la configuración de temas

Ejecuta mediante SSH en el host RK3576:

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

Confirma que el archivo contiene:

yaml
frontend:
  themes: !include_dir_merge_named themes

Si ya existe frontend:, no añadas otra clave frontend:. Añade o conserva themes: debajo de la existente. La configuración del tutorial de instalación Container puede incluir estas líneas.

Guarda y ejecuta la comprobación oficial:

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

Reinicia solo al añadir por primera vez o modificar la configuración del directorio de temas en configuration.yaml:

bash
sudo docker restart homeassistant

Paso 8: Descargar Catppuccin Theme

  1. Selecciona HACS en la barra lateral.
  2. Busca Catppuccin y selecciona Catppuccin Theme.
  3. Selecciona Download para abrir la confirmación de versión.
  4. Conserva la versión predeterminada recomendada (v2.1.3 en la prueba) y selecciona DOWNLOAD abajo a la derecha.

La interfaz probada mostró esta ruta de almacenamiento:

text
/config/themes/catppuccin/catppuccin.yaml

Descargar Catppuccin Theme con HACS

“Need a different version?” permite elegir otra versión. La primera instalación normalmente no requiere seleccionar manualmente una versión antigua.

Paso 9: Recargar los temas

Tras descargar, abre:

Settings → Tools → Actions

Busca y ejecuta esta acción:

text
frontend.reload_themes

Recarga los temas sin reiniciar el contenedor. Si la acción no aparece, ejecuta sudo docker restart homeassistant y actualiza el navegador.

Paso 10: Seleccionar Catppuccin Mocha

  1. Selecciona el avatar de usuario abajo a la izquierda para abrir Profile.
  2. Abre el desplegable Theme.
  3. Selecciona Catppuccin Mocha.
  4. La interfaz suele cambiar inmediatamente al tema oscuro.

Los estilos son:

TemaEstilo
Catppuccin LatteClaro, para entornos luminosos
Catppuccin FrappéPaleta oscura gris azulada suave
Catppuccin MacchiatoPaleta gris azulada oscura
Catppuccin MochaPaleta oscura violeta y azul, adecuada para pantallas de monitorización
Catppuccin Auto Latte MochaCambia el estilo correspondiente según el modo claro/oscuro

Resultados

Al aplicar Catppuccin Mocha en RK3576, el panel Modbus TCP existente adopta una paleta oscura. Los indicadores de temperatura y humedad y los gráficos históricos siguen visibles.

Tema oscuro Catppuccin Mocha en reComputer RK3576

Si completaste el tutorial Modbus TCP, abre RK3576 Modbus Monitoring desde la barra lateral para ver el panel con el nuevo tema. El cambio modifica el estilo visual, sin alterar direcciones de registros ni la recopilación de datos.

La demostración siguiente muestra el panel antes de cambiar el tema, como referencia de la funcionalidad existente. No muestra el tema oscuro.

Panel Modbus TCP antes del cambio de tema

Preguntas frecuentes

Catppuccin no aparece en el perfil después de descargarlo

  1. Confirma que configuration.yaml contiene frontend: themes: !include_dir_merge_named themes con la indentación YAML correcta.
  2. Comprueba /config/themes/catppuccin/catppuccin.yaml; utiliza la ruta real que muestra HACS.
  3. Ejecuta frontend.reload_themes. Reinicia el contenedor y actualiza el navegador si hace falta.

Resumen

Este tutorial cubre instalación de HACS, autorización GitHub, descarga de temas comunitarios y selección del tema oscuro en Home Assistant Container sobre RK3576. Puede actuar como nodo de monitorización Modbus TCP y plataforma local de gestión AIoT con una interfaz web extensible.

Para ampliar la personalización, utiliza tarjetas HACS compatibles con tu versión o integraciones nativas para luces, cámaras y otros dispositivos. Evalúa el mantenimiento y la compatibilidad de terceros.

Referencias