Guida · Estendere
Un tema tuo, da capo
Un nome, una palette, dei font. Il tema attivo è uno solo, ed è una costante nel codice — non una preferenza in database.
Dove siamo
Sai come i temi coprono le variabili base. Alla fine di questo capitolo ne avrai uno tuo e lo avrai attivato.
Il gesto
Aggiungi una voce in db.themes.json: name, label, palette.
Se cambi tipografia, dichiara i font fra quelli caricati. Un nome non caricato dà il font di sistema.
Apri src/themes.ts e metti il tuo nome in ACTIVE_THEME.
export const ACTIVE_THEME = 'ilMioTema'
Cos’è appena successo
Il tema attivo è una costante del progetto, non un valore scelto a runtime. È una decisione precisa: un progetto ha un tema, e averne uno solo permette di generare le classi e le variabili a build senza chiedersi quale sia in uso.
Il catalogo oggi ne spedisce uno solo. Ce n’erano tredici, e sono stati tolti per rifarli da uno scenario pulito: nessuno di loro dichiarava l’inchiostro dei ruoli, e un tema senza inchiostro non degrada — cade sul ripiego chiaro e scrive chiaro su chiaro. Meglio nessun tema che dodici che mentono.
Verificare che sia leggibile
Un tema nuovo va passato a un controllo di contrasto prima di considerarlo finito: ogni combinazione testo/fondo che il tema introduce va misurata, e quelle sotto soglia corrette. Il pacchetto non lo fa per te — è una verifica del progetto.
Lo script segnala e non corregge, ed è voluto: il contrasto si risolve scegliendo un colore, e quella è una decisione di design.
Quando non funziona
Scrivi in ACTIVE_THEME un nome che nel registro non c’è. Il sito parte, e i colori sono quelli di base: nessun tema ha coperto niente.
Non è un errore perché la sovrapposizione con un tema mancante è semplicemente vuota.
Avanti
Hai esteso i dati. Nel capitolo dopo estendi il codice.