Temi Home Assistant

Italiano English

«Temi Home Assistant» è la ricerca fatta tante volte da meritarsi una pagina sul mio sito. Per molto tempo il risultato è stato sempre lo stesso: temi meravigliosi negli screenshot, installati in dieci secondi, disinstallati in cinque. Bellissimi da guardare, ma inutilizzabili.

Il copione lo conosco a memoria. Trovi lo screenshot perfetto sul forum, con la dashboard che sembra il ponte di comando dell'Enterprise. Copi il YAML, riavvii, apri il pannello e scopri che il testo secondario è grigio scuro su sfondo nero, che l'icona della luce accesa ha esattamente lo stesso giallo del badge di avviso e che lo slider del volume diventa visibile solo quando ci appoggi sopra il dito. Bello. Da fotografare, non da usare.

Poi c'è la variante peggiore: il tema che funziona davvero, ma pretende card-mod, tre integrazioni installate via HACS e una preghiera laica[^card-mod è una modifica non ufficiale che permette di iniettare CSS arbitrario dentro le schede di Lovelace. Funziona benissimo finché il frontend non cambia una classe interna, cosa che succede regolarmente. Il repository è su GitHub, l'assistenza tecnica quando si rompe è affidata alla tua pazienza.]. Regge splendidamente, fino al primo aggiornamento serio di Home Assistant. Poi una mattina ti presenta il conto: metà interfaccia bianca, l'altra metà scomparsa.

Così ho smesso di cercare e ho iniziato a costruirli. Questi sette temi (iniziali, ma... ce ne saranno altri) sono il risultato: gratuiti, completi, con lo sfondo incluso e con un file di istruzioni in italiano e inglese dentro ogni cartella.

Le tre regole che mi sono dato

Prima ho letto la documentazione ufficiale del frontend, poi ho scritto il primo YAML. In quest'ordine, che è l'unico che funziona e che - a giudicare da certi temi in circolazione - non gode di grandissima popolarità.

Prima regola: solo variabili supportate

Home Assistant mette a disposizione un elenco preciso di variabili tema. È lungo, è noioso, è l'unica cosa che ti garantisce che il tema funzionerà anche fra sei mesi. Tutto quello che sta fuori da quell'elenco è terreno minato: magari oggi funziona, ma è un dettaglio implementativo che nessuno si è impegnato a mantenere[^La documentazione distingue esplicitamente tra variabili supportate e variabili non supportate. La seconda pagina esiste proprio perché in tanti hanno provato a fare i furbi.]
Quindi: niente card-mod, niente CSS di contrabbando, niente JavaScript aggiuntivo. Solo YAML, solo variabili dichiarate, solo cose che sopravvivono agli aggiornamenti.

Seconda regola: nessuna versione chiara/scura

Nessuno di questi temi ha una modalità chiara o scura. Non è una dimenticanza, è una scelta: un tema che vuole essere bello sia alle undici del mattino sia alle undici di sera finisce per essere accettabile in entrambi i casi e memorabile in nessuno dei due. Ogni palette è costruita così, punto.

Se ti serve il pannello luminoso per la cucina alle sette del mattino, il selettore di Home Assistant tiene tranquillamente più temi installati insieme: ne metti uno mio la sera e un altro per il giorno, senza che nessuno si offenda.

Terza regola: lo sfondo fa parte del tema

Un tema con una bella palette e sotto il grigio di default è come una giacca su misura indossata con le ciabatte. Quindi ogni pacchetto contiene il suo sfondo, generato dalla stessa palette, in versione desktop e smartphone, con il sorgente vettoriale e lo script Python che lo rigenera se vuoi cambiare risoluzione.

⌨️

Nota tecnica
Se non hai voglia di copiare i PNG - magari perché usi solo l'add-on File editor, che i file binari si rifiuta categoricamente di caricare - dentro ogni Instructions.md c'è una riga alternativa che sostituisce l'immagine con un gradiente CSS puro. Perdi la texture, ma il tema resta identico e l'installazione si riduce a un unico file di testo.

Da dove nascono le palette

Tutte e sette arrivano dal mio generatore di sfondi, dove i colori non sono elenchi di codici esadecimali, ma rampe continue da cui si può campionare in qualsiasi punto. Per il tema ho ridotto ogni rampa a otto stop: sfondo dell'applicazione, superficie delle schede, bordi, accento, colore primario, hover, testo secondario, testo primario.

Sopra ci ho messo quattro accenti semantici - errore, avviso, successo, luci accese - scelti uno per uno perché restassero leggibili su quello sfondo lì, non su uno sfondo generico. È la parte più noiosa del lavoro ed è anche l'unica che si nota davvero: un giallo "avviso" perfetto su antracite diventa un fantasma su un viola saturo, quindi nessun accento è riciclato da un tema all'altro. Sette temi, ventotto accenti, molte serate trascorse ad imprecare.

I sette temi

Tema	Anima	Colore primario	Cartella
Nordic	Freddo, artico, sobrio	`#81a1c1`	Apri
Ghiaccio	Blu profondo, marino	`#468faf`	Apri
Notte	Blu quasi nero, notturno	`#5a6ac9`	Apri
Lavanda	Viola tenue, riposante	`#9f86c0`	Apri
Uva	Viola saturo, deciso	`#a855d8`	Apri
Salvia	Verde erbaceo, caldo	`#84a98c`	Apri
Sunset	Crepuscolo, arancio, ambra	`#ee6c6b`	Apri

Nordic è il più educato del gruppo, derivato dalla celebre palette Nord: grigio-azzurro polare, contrasto misurato, zero drammi. È l'unico che riesco a guardare alle sei del mattino senza avere la tentazione di richiudere le tapparelle e rimandare tutto a domani.

Ghiaccio prende lo stesso freddo e lo porta sott'acqua: dal blu abissale all'azzurro brinato, con una progressione che stacca le schede dallo sfondo in modo quasi ostentato. È quello sul tablet in cucina, dove le informazioni vanno lette in due secondi, con le mani occupate.

Notte è il più scuro di tutti: sfondo #0b0d21, praticamente nero, ma con un'anima blu che si nota solo quando spegni la luce. Pensato per i pannelli che restano accesi la notte e non devono illuminare la stanza come un faro portuale.

Lavanda è viola, però ben educato: rosa cipria sul testo secondario, accenti morbidi, nessuna aggressività. È quello che consiglio a chi guarda Uva e commenta «bello, ma non ce la faccio».

Uva è Lavanda dopo tre caffè. Melanzana profondo che sale fino al lillà elettrico, saturo senza il minimo pudore, con accenti scelti apposta per non farsi ingoiare dal viola. Non è un tema per tutti, ma chi lo ama non torna più indietro.

Salvia è l'unico verde della collezione e l'unico che definirei caldo. Verde-antracite, poi salvia (il mio colore preferito), poi bianco erbaceo, con accenti desaturati che non stonano mai. Se le dashboard scure ti mettono addosso un lieve senso di sala server, è la cura.

Sunset è il teatrale della famiglia: viola crepuscolare in basso, poi magenta, corallo, arancio e sabbia. Sulla dashboard principale fa una figura splendida. Va detto, però, che dopo un'ora passata a spostare schede dentro un tramonto perpetuo ti viene voglia di uscire davvero.

Come si installano: tre mosse

La procedura completa, con tutte le varianti possibili (File editor, Studio Code Server, SSH, Samba), è nel file Instructions.md dentro ogni cartella. La versione breve sta in tre passaggi.

Uno. Copia il file .yaml nella cartella themes della tua configurazione, quella che contiene configuration.yaml. Se themes non esiste, creala[^Piccolo avvertimento che vale metà delle segnalazioni "non funziona": se ti colleghi in SFTP all'add-on SSH atterri in /root/, che è la home di un container separato e che Home Assistant non legge nemmeno per sbaglio. Devi entrare in homeassistant/ (oppure config/, che è lo stesso posto), altrimenti il tema non comparirà mai nel selettore.].

Due. Copia i due PNG dello sfondo in www/nome-del-tema/ e verifica che configuration.yaml contenga queste due righe:

frontend:
  themes: !include_dir_merge_named themes

Tre. Riavvia Home Assistant - oppure, più elegantemente, vai su Strumenti per sviluppatori → YAML → Ricarica temi - poi clicca sul tuo nome in basso a sinistra e scegli il tema dal menu Tema.

Se il tema non compare nell'elenco, nel novantacinque per cento dei casi il file è nel posto sbagliato. Nel restante cinque per cento manca la riga themes: in configuration.yaml. Non esiste un terzo caso, l'ho cercato a lungo. 😂

Perché non sono su HACS

Domanda legittima, risposta breve: perché un tema per Home Assistant è un singolo file di testo più un'immagine. Aggiungerci sopra un negozio di componenti aggiuntivi, una repository da registrare e un aggiornamento automatico da controllare significa costruire un'infrastruttura intorno a meno di un centinaio di righe di YAML.

Scaricare una cartella e trascinare due file è un'operazione che chiunque abbia installato Home Assistant sa già fare a occhi chiusi. Il minimo indispensabile, quando basta, è quasi sempre la scelta giusta: meno pezzi ci sono, meno cose si rompono. Se un giorno i temi diventeranno venti, ne riparliamo.

Cosa c'è dentro ogni cartella

Il file YAML del tema, le istruzioni in italiano e inglese, l'anteprima della palette in SVG, il changelog (registro delle modifiche) e la cartella backgrounds con lo sfondo in due risoluzioni, il sorgente vettoriale e lo script Python che rigenera i PNG.

Sono temi che uso ogni giorno, quindi vengono corretti nel momento esatto in cui qualcosa smette di convincermi - di solito alle undici di sera, mentre giuro che quella era l'ultima modifica. Tutto il codice è su GitHub, quindi le versioni successive arrivano da lì.

🇬🇧 This page is also available in English: Home Assistant Themes.