Scopri come creare temi personalizzati per Home Assistant. Tutorial completo con codice Liquid Glass, installazione e personalizzazioni avanzate. Guida 2025 per trasformare l'interfaccia della tua domotica.
In questa guida completa esploreremo come creare un tema personalizzato per Home Assistant utilizzando il moderno design Liquid Glass basato sul glassmorphism, dalla configurazione base alle personalizzazioni avanzate con card-mod.
Trasformazione completa: Dashboard ispirata a Liquid Glass
Introduzione: Perché Personalizzare l'Interfaccia di Home Assistant
Home Assistant è la piattaforma di domotica open source più popolare al mondo, ma la sua interfaccia di default può risultare monotona dopo un po'. Creare un tema personalizzato per Home Assistant non è solo una questione estetica: significa migliorare l'usabilità, l'esperienza utente e rendere la gestione della casa intelligente più piacevole e intuitiva.
In questa guida completa, ti mostrerò passo dopo passo come sviluppare temi personalizzati e ti fornirò il codice completo del tema Liquid Glass, un design moderno basato sul glassmorphism che trasformerà completamente la tua dashboard domotica.
Cosa Sono i Temi Personalizzati di Home Assistant
I temi personalizzati Home Assistant sono file di configurazione YAML che permettono di modificare completamente l'aspetto dell'interfaccia utente. Attraverso centinaia di variabili CSS predefinite, puoi personalizzare:
- Colori: palette cromatiche, gradienti e trasparenze
- Tipografia: font, dimensioni e spaziature del testo
- Layout: sfondi, bordi, ombre e geometrie
- Componenti: card, sidebar, header e controlli
- Animazioni: transizioni ed effetti hover
Vantaggi dei Temi Personalizzati
Un tema ben progettato offre numerosi benefici:
Migliore leggibilità: contrasti ottimizzati per ridurre l'affaticamento visivo. Identità visiva: interfaccia che riflette il tuo stile personale. Usabilità avanzata: elementi che guidano l'attenzione verso le informazioni prioritarie. Esperienza premium: design moderno che valorizza il tuo investimento in domotica.
Esempio di Vista: Carta Grafici con ombre.
Esempio Card: Info secondarie in carta popup.
Prerequisiti e Preparazione dell'Ambiente
Struttura Directory Temi
Prima di iniziare, organizza correttamente la struttura delle cartelle:
config/
├── configuration.yaml
├── themes/
│ ├── liquid-glass-light.yaml
│ └── [altri-temi].yaml
└── www/
└── [risorse-aggiuntive]
Configurazione Base in configuration.yaml
Aggiungi questa riga al tuo configuration.yaml per abilitare il caricamento dei temi:
frontend:
themes: !include_dir_merge_named themes/
Card-Mod: Integrazione Opzionale ma Consigliata
Per ottenere i migliori effetti glassmorphism, installa card-mod tramite HACS. Non è obbligatorio, ma potenzia significativamente le capacità di personalizzazione.
Anatomia di un Tema Home Assistant: Variabili CSS Essenziali
Categorie Principali di Variabili
I temi di Home Assistant si basano su un sistema strutturato di variabili CSS. Ecco le categorie più importanti:
1. Colori Primari e Accenti
primary-color: "#3b82f6" # Colore principale
accent-color: "#9333ea" # Colore di accento
dark-primary-color: "#1e40af" # Variante scura
light-primary-color: "#bfdbfe" # Variante chiara
2. Sfondi e Layout
primary-background-color: "#f8fafc" # Sfondo principale
secondary-background-color: "#f1f5f9" # Sfondo secondario
card-background-color: "#ffffff" # Sfondo card
sidebar-background-color: "#f1f5f9" # Sfondo sidebar
3. Tipografia e Testi
primary-text-color: "#0f172a" # Testo principale
secondary-text-color: "#475569" # Testo secondario
disabled-text-color: "#94a3b8" # Testo disabilitato
Tutorial Pratico: Creazione del Tema Liquid Glass
Concept Design: Il Glassmorphism
Il tema Liquid Glass si ispira al glassmorphism, una tendenza del design contemporaneo caratterizzata da:
- Trasparenze strategiche: sfondi semi-trasparenti che creano profondità
- Effetti blur: sfocature che simulano il vetro smerigliato
- Bordi cristallini: outline delicati e luminosi
- Gradenti sofisticati: transizioni cromatiche morbide
- Micro-animazioni: feedback visivi fluidi e responsivi
Palette Cromatica del Tema
Il Liquid Glass utilizza una palette basata su:
- Primary: Blu cristallino (#3b82f6) con trasparenze graduate
- Accent: Viola elegante (#9333ea) per elementi attivi
- Neutrals: Grigi sofisticati per testi e divisori
- States: Verde brillante per stati positivi, rosso coral per alert
Codice Completo del Tema Liquid Glass
Ecco il codice completo del tema, ottimizzato per prestazioni e compatibilità:
liquid-glass-light:
# === COLORI PRINCIPALI CHIARI ===
primary-color: "rgba(59, 130, 246, 0.8)" # Blu cristallino
accent-color: "rgba(147, 51, 234, 0.7)" # Viola accento
dark-primary-color: "rgba(37, 99, 235, 0.9)"
light-primary-color: "rgba(191, 219, 254, 0.6)"
# === SFONDI LUMINOSI CON VETRO ===
primary-background-color: "rgba(248, 250, 252, 0.85)" # Bianco traslucido
secondary-background-color: "rgba(241, 245, 249, 0.7)" # Grigio chiarissimo
divider-color: "rgba(148, 163, 184, 0.3)" # Divisori delicati
# === CARD GLASSMORPHISM CHIARE ===
card-background-color: "rgba(255, 255, 255, 1)" # Card vetro bianche
card-border-color: "rgba(203, 213, 225, 0.4)"
card-border-width: "1px"
card-border-radius: "20px"
# === SIDEBAR CRISTALLINA ===
sidebar-background-color: "rgba(241, 245, 249, 0.6)"
sidebar-selected-background-color: "rgba(59, 130, 246, 0.15)"
sidebar-selected-icon-color: "rgba(37, 99, 235, 1)"
sidebar-selected-text-color: "rgba(30, 41, 59, 1)"
sidebar-icon-color: "rgba(71, 85, 105, 0.7)"
sidebar-text-color: "rgba(51, 65, 85, 0.8)"
# === TESTI ELEGANTI ===
primary-text-color: "rgba(15, 23, 42, 0.9)" # Nero soft
secondary-text-color: "rgba(71, 85, 105, 0.7)" # Grigio scuro
text-primary-color: "rgba(15, 23, 42, 1)"
disabled-text-color: "rgba(148, 163, 184, 0.6)"
# === HEADER TRASPARENTE ===
app-header-background-color: "rgba(255, 255, 255, 0.5)"
app-header-text-color: "rgba(30, 41, 59, 0.9)"
app-header-edit-background-color: "rgba(59, 130, 246, 0.2)"
# === STATI E ICONE LUMINOSE ===
state-icon-color: "rgba(59, 130, 246, 0.8)" # Icone blu cristallo
state-icon-active-color: "rgba(147, 51, 234, 0.9)" # Icone attive viola
state-active-color: "rgba(34, 197, 94, 0.8)" # Verde brillante
state-inactive-color: "rgba(148, 163, 184, 0.6)" # Grigio neutro
# === SWITCH CRYSTAL ===
switch-checked-color: "rgba(34, 197, 94, 0.9)"
switch-unchecked-color: "rgba(203, 213, 225, 0.8)"
switch-checked-button-color: "rgba(255, 255, 255, 1)"
switch-unchecked-button-color: "rgba(148, 163, 184, 0.9)"
switch-checked-track-color: "rgba(34, 197, 94, 0.3)"
switch-unchecked-track-color: "rgba(226, 232, 240, 0.8)"
# === SLIDER GLASS ===
slider-color: "rgba(59, 130, 246, 0.8)"
slider-track-color: "rgba(226, 232, 240, 0.8)"
slider-bar-color: "rgba(59, 130, 246, 0.6)"
# === EFFETTI GLASS CHIARI ===
success-color: "rgba(34, 197, 94, 0.7)"
warning-color: "rgba(251, 191, 36, 0.7)"
error-color: "rgba(239, 68, 68, 0.7)"
info-color: "rgba(59, 130, 246, 0.7)"
# === CARD-MOD AUTOMATICO PER TUTTE LE CARTE ===
# NOTA: Richiede card-mod installato tramite HACS (opzionale ma consigliato)
card-mod-root: |
ha-card {
background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 100%) !important;
backdrop-filter: blur(15px) saturate(1.3) !important;
-webkit-backdrop-filter: blur(15px) saturate(1.3) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
border-radius: 20px !important;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15) !important;
transition: all 0.3s ease !important;
}
ha-card:hover {
transform: translateY(-2px) !important;
box-shadow: 0 12px 40px rgba(31, 38, 135, 0.25) !important;
}
Guida all'Installazione Step-by-Step
Step 1: Preparazione dei File
- Crea la cartella themes nella directory config di Home Assistant
-
Salva il codice in un file chiamato
liquid-glass-light.yaml - Verifica i permessi di lettura del file
Step 2: Configurazione Home Assistant
Modifica il configuration.yaml:
frontend:
themes: !include_dir_merge_named themes/
Step 3: Riavvio e Attivazione
- Riavvia Home Assistant per caricare il nuovo tema
- Vai in Impostazioni → Sistema → Generale
- Nella sezione Tema, seleziona "liquid-glass-light"
- Applica e salva le modificazioni
Personalizzazioni Avanzate e Ottimizzazioni
Creazione di Varianti del Tema
Puoi facilmente creare varianti del Liquid Glass modificando specifiche sezioni:
Variante Dark Mode
liquid-glass-dark:
# Eredita dal tema light e sovrascrive i colori
primary-background-color: "rgba(15, 23, 42, 0.85)"
card-background-color: "rgba(30, 41, 59, 0.7)"
primary-text-color: "rgba(248, 250, 252, 0.9)"
Variante Colorful
liquid-glass-colorful:
# Palette più vivace
primary-color: "rgba(236, 72, 153, 0.8)"
accent-color: "rgba(168, 85, 247, 0.7)"
Ottimizzazione Prestazioni e Compatibilità
Best Practices per le Performance
- Limita le animazioni su dispositivi meno potenti
- Ottimizza i valori blur (8px invece di 15px per dispositivi datati)
- Usa variabili CSS per modifiche rapide
- Testa su diversi browser per compatibilità
Codice Ottimizzato per Dispositivi Mobili
card-mod-root: |
@media (max-width: 768px) {
ha-card {
border-radius: 16px !important;
margin: 6px !important;
backdrop-filter: blur(10px) !important;
}
}
@media (prefers-reduced-motion: reduce) {
ha-card {
transition: none !important;
animation: none !important;
}
}
Risoluzione Problemi e Troubleshooting
Il Tema Non Appare Nella Lista
- ✅ Verifica l'indentazione YAML (usa 2 spazi, no tab)
-
✅ Controlla il percorso del file
themes/liquid-glass-light.yaml - ✅ Riavvia Home Assistant completamente
Effetti Glassmorphism Non Visibili
- ✅ Installa card-mod tramite HACS
- ✅ Verifica compatibilità browser (Chrome, Firefox, Safari moderni)
- ✅ Controlla console browser per errori CSS
Performance Lente
-
✅ Riduci intensità blur:
blur(8px)invece diblur(15px) -
✅ Disabilita animazioni: rimuovi
transitioneanimation - ✅ Usa
will-change: transformper elementi animati
Conclusioni: Il Tuo Home Assistant con Stile Premium
Il tema Liquid Glass per Home Assistant rappresenta il perfetto equilibrio tra estetica moderna e funzionalità pratica. Con questo tutorial hai imparato a creare temi personalizzati per Home Assistant partendo da zero, ottenendo un risultato professionale che trasforma completamente l'esperienza d'uso della tua piattaforma domotica.
Cosa Hai Ottenuto
- Interfaccia Premium: Design glassmorphism all'avanguardia
- Codice Completo: Tema pronto all'uso e completamente personalizzabile
- Competenze Avanzate: Conoscenza approfondita del sistema di temi Home Assistant
- Base Solida: Fondamenta per creare infinite varianti personalizzate
Ricorda i Vantaggi del Tema Liquid Glass
Il tema che hai implementato non è solo bello da vedere, ma migliora concretamente l'esperienza quotidiana:
- Leggibilità Ottimale: Contrasti calibrati per ridurre l'affaticamento visivo
- Navigazione Intuitiva: Elementi che guidano naturalmente l'attenzione
- Esperienza Fluida: Animazioni e transizioni che rendono ogni interazione piacevole
- Compatibilità Universale: Funziona perfettamente su desktop, tablet e smartphone
Creare temi personalizzati per Home Assistant è un investimento nel lungo termine che valorizza ogni momento passato a gestire la tua casa intelligente. Il Liquid Glass theme è solo l'inizio: ora hai tutti gli strumenti per sperimentare, personalizzare e creare l'interfaccia domotica dei tuoi sogni.
Per chi vuole approfondire ulteriormente, il tema Liquid Glass può essere esteso con componenti personalizzati, integrazioni avanzate e automazioni che sfruttano i cambiamenti di colore per comunicare stati della casa. La personalizzazione dell'interfaccia Home Assistant non ha limiti quando conosci le basi!
Altre idee per continuare
- 📋 Salva il codice del tema in locale per backup
- 🎨 Sperimenta con nuove palette colori
- 🚀 Installa card-mod per effetti avanzati
- 💡 Crea varianti per diverse stagioni o momenti della giornata
