Transizioni fluide tra modalità Luce e Buio: token, CSS e movimento
Come creare un interruttore a tema chiaro/scuro che rispetti le impostazioni di sistema, eviti un flash al caricamento, stili i controlli nativi e si animi senza compromettere l'accessibilità.
Punto chiave
Costruisci temi su token semantici, segui l'impostazione del sistema con prefers-color-scheme per impostazione predefinita, consenti alle persone di sovrascriverlo e imposta la proprietà color-scheme in modo che i controlli del modulo e le barre di scorrimento corrispondano. Applica il tema salvato prima del rendering della pagina per evitare un flash. Mantieni l'animazione del cambio breve, ad esempio una rapida dissolvenza incrociata o una transizione di visualizzazione, e saltala quando il movimento ridotto è attivo.
Inizia dalle impostazioni di sistema
La funzione multimediale di combinazione colori preferita indica se l'utente ha chiesto al proprio sistema operativo un tema chiaro o scuro. Usalo come predefinito e aggiungi un interruttore in-app che lo sovrascriva e venga ricordato.
Tema con token, senza sostituzioni
Definisci i colori come token semantici (superficie, testo, bordo, accento) e assegna a ciascun tema i propri valori, solitamente come proprietà personalizzate CSS sull'elemento root. I componenti quindi non cambiano mai tra i temi; lo fanno solo i valori dei token. Questo è lo stesso approccio token a tre livelli utilizzato per i sistemi di progettazione multimarca.
Non dimenticare i controlli nativi
MDN spiega che la proprietà color-scheme indica al browser quali schemi supporta un elemento, che modifica i colori predefiniti dei controlli del modulo, delle barre di scorrimento e di altra interfaccia utente incorporata. Senza di essa, una pagina scura può mostrare input e barre di scorrimento di colore bianco brillante.
Evitare il flash durante il caricamento
Se il tema salvato viene applicato da JavaScript dopo il rendering della pagina, le persone vedono un flash del tema sbagliato. Applicalo il prima possibile, con un piccolo script in linea nell'intestazione del documento o un attributo reso dal server, prima che il foglio di stile venga disegnato.
Animare attentamente l'interruttore
Una breve dissolvenza incrociata, da 150 a 250 millisecondi, fa sembrare il cambiamento intenzionale. Evita la transizione di ogni proprietà del colore su ogni elemento, che può essere lenta su pagine di grandi dimensioni; una singola istantanea di transizione della vista è spesso più fluida. Rendi chiaro l'interruttore stesso, con un'etichetta o una descrizione comando e rimuovi l'animazione quando il movimento ridotto è attivo.
Estratto di implementazione in produzione
/* Tokens per theme */
:root { color-scheme: light dark; --surface: #ffffff; --text: #121212; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --surface: #121212; --text: #f2f2f2; }
}
:root[data-theme="dark"] { color-scheme: dark; --surface: #121212; --text: #f2f2f2; }
:root[data-theme="light"] { color-scheme: light; }
body { background: var(--surface); color: var(--text); }
// Switch with a View Transition where supported, instantly otherwise
function setTheme(theme) {
const apply = () => { document.documentElement.dataset.theme = theme; localStorage.setItem('theme', theme); };
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) return apply();
document.startViewTransition(apply);
}Principi chiave da ricordare
- L'impostazione predefinita è prefers-color-scheme; lascia che le persone prevalgano e lo ricordino
- Tema con token semantici, non override per componente
- Imposta la combinazione di colori in modo che i controlli nativi corrispondano
- Applica il tema salvato prima di dipingere
- Mantieni l'animazione del cambio breve e rispetta il movimento ridotto
Domande frequenti
Fonti
- prefers-color-scheme — MDN Documenti Web
- color-scheme — MDN Documenti Web
- View Transition API — MDN Documenti Web