Lily Design System™

Temi

I componenti Lily hanno hook di classe stabili e zero CSS — quindi un tema è solo un foglio di stile. Questo tutorial va da "collega un file" a "lascia che l'utente cambi tema a runtime, con persistenza".

Cosa costruirai

Un'app il cui intero aspetto l'utente può cambiare — partendo da un foglio di stile collegato, fino a un selettore di tema a runtime con persistenza — in circa 15 minuti.

Prima di iniziare

Completa prima il tutorial del framework per il tuo stack prima, così hai un piccolo modulo Lily da tematizzare. Tutto qui funziona in tutti e sette i framework; gli esempi di codice mostrano Svelte e HTML semplice.

Passo 1 — Collega un tema pronto

themes/ directory contiene 45 fogli di stile autonomi. Copiali negli asset statici della tua app e collegane uno: 

<link rel="stylesheet" href="/assets/themes/united-kingdom-national-health-service-england-for-patients.css" />

Alcuni punti salienti del set:

  • Settore pubblico — NHS England / Scotland / Wales, ciascuno nelle varianti per pazienti e per professionisti; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Ispirati ai fornitori — adobe-spectrum, mozilla-protocol.
  • Uso generale — light, dark, nord, dracula, wireframe, corporate, synthwave, e molti altri.

Controlla il lavoro: ricarica la pagina. Lo stesso markup costruito nel tutorial del framework è ora completamente stilizzato — pulsanti, campi, etichette, anelli di focus. Una riga di HTML ha fatto tutto questo — ogni componente è rimasto esattamente com'era.

Passo 2 — Sostituisci qualsiasi cosa

I selettori dei temi sono avvolti in :where(...)che ha specificità zero — quindi qualsiasi regola scrivi vince, semplice e chiaro: 

/* After the theme link: your brand button, everything else themed */
.button {
  background: #7c3aed;
  border-radius: 9999px;
}

Passo 3 — Cambio a runtime con theme-picker

theme-picker l'helper è un pulsante a icona + listbox headless che gestisce l'intero ciclo di vita del tema: carica il foglio di stile scelto sostituendo un unico <link> gestito (viene scaricato solo il tema attivo), imposta data-theme="{slug}" sul documento e, facoltativamente, lo rende persistente in localStorage. Qui si mostra Svelte; i port per React, Vue, Angular, HTML, Nunjucks e Blazor corrispondono contratto per contratto: 

<script>
  import ThemePicker from "@lilydesignsystem/svelte-theme-picker";
</script>

<ThemePicker
  label="Theme"
  themesUrl="/assets/themes/"
  themes={["light", "dark", "nord", "wireframe"]}
  storageKey="my-app-theme"
/>

Questa è tutta l'integrazione. Il comportamento da tastiera segue il pattern listbox WAI-ARIA APG; il controllo stesso è headless (hook di classe .theme-picker), quindi assume qualsiasi tema sia attivo.

Verificato il 2026-08-29: questo snippet esatto è stato compilato rispetto al pacchetto pubblicato 0.1.1 tramite svelte/server.

Passo 4 — Reagisci al tema nel tuo CSS

Poiché l'helper imposta data-theme sulla radice del documento, i tuoi stili possono diramarsi in base a esso: 

[data-theme="dark"] .site-logo { filter: invert(1); }

Note per il rendering lato server

L'helper esegue tutte le scritture nel DOM dentro il ciclo di vita mount/effect del framework, quindi è sicuro per SSR per costruzione. Per evitare uno sfarfallio al primo disegno, renderizza sul server il <link> e data-theme del tema iniziale (ad esempio da un cookie) — il repository dell'helper Svelte include un esempio eseguibile di cookie per SvelteKit, e gli altri cataloghi documentano lo stesso pattern per i loro stack.

Prossimi passi

  • Helper delle preferenze — lo stesso pattern per lingua, dimensione del testo, condivisione e inserimento di data/ora.
  • Contribuisci con un tema — ognuno è un foglio di stile autonomo che punta agli hook di classe; vedi la guida al contributo.

Domande lungo la strada? La pagina di aiuto è piena di risposte — e se un passo può essere più chiaro, faccelo sapere e miglioreremo volentieri il tutorial.