Cos’è Prefers-Color-Scheme?
La media query
prefers-color-scheme
è uno strumento fondamentale per creare esperienze web adattive. Permette di rilevare se l’utente ha configurato una preferenza per il tema chiaro o scuro a livello di sistema operativo â Windows, macOS, iOS, Android.
Non è più necessario forzare il tema scelto dal designer. Gli utenti hanno preferenze consolidate, e rispettarle significa migliorare l’usabilità e ridurre l’affaticamento visivo durante lunghe sessioni di lettura.
Il valore del rilevamento
Oltre il 70% degli utenti con sistema operativo moderno ha già configurato una preferenza di colore. Rispettare questa scelta è considerato uno standard di accessibilità .
Come Implementare la Media Query
La sintassi è semplice. Nel CSS scrivi due set di regole separate:
Per il tema scuro, usi
@media (prefers-color-scheme: dark)
. Per il tema chiaro,
@media (prefers-color-scheme: light)
. Questo permette di definire colori, font-weight, persino layout leggermente diversi a seconda della preferenza rilevata.
Molti sviluppatori scelgono di settare le variabili CSS (custom properties) all’interno di queste media query. à l’approccio più pulito e manutenibile â gestisci i colori una sola volta, in un posto centralizzato.
Costruire un Toggle Accessibile
Anche se il sistema operativo ha una preferenza, gli utenti vogliono il controllo. Un toggle button permette di cambiare tema manualmente, indipendentemente dalle impostazioni di sistema.
Il toggle deve essere ben visibile, intuitivo. Usa un’icona chiara â una luna per il tema scuro, un sole per il tema chiaro. L’accessibilità richiede che il pulsante abbia uno stato focus visibile, etichetta ARIA esplicita, e feedback tattile (almeno una transizione di colore).
Crea un pulsante con attributo
aria-label
Aggiungi JavaScript per rilevare il click e cambiare classe
Salva la preferenza in localStorage per ricordarla
Memorizzare la Scelta dell’Utente
localStorage è il posto giusto. Quando l’utente clicca il toggle, salvi il valore della sua scelta. Alla prossima visita, il sito caricherà direttamente il tema scelto, senza flash di colore.
C’è però una gerarchia da rispettare: se l’utente ha cambiato manualmente il tema, quella scelta ha priorità . Se invece non ha mai toccato il toggle, il sito dovrebbe rispettare la preferenza di sistema. Questo significa controllare localStorage prima, poi prefers-color-scheme come fallback.
“Preferenze di sistema sono il default sensato, ma il controllo manuale deve avere priorità quando l’utente lo desidera.”
Testare Contrasto e AccessibilitÃ
Non basta assumere che il contrasto sia sufficiente. Devi verificare. Gli strumenti del browser (DevTools di Chrome, Firefox) hanno inspector di accessibilità integrato che ti mostrano il rapporto di contrasto real-time.
WCAG 2.1 richiede un contrasto minimo di 4.5:1 per il testo standard, 3:1 per testo grande. Se il tuo testo non raggiunge questi livelli in nessuno dei due temi, dovrai regolare i colori. A volte significa usare tonalità diverse tra il tema chiaro e scuro â il grigio che funziona bene su sfondo scuro potrebbe non funzionare su sfondo chiaro.
Utilizza anche strumenti come WebAIM Contrast Checker o Stark (plugin Figma) durante la fase di design. à più efficace correggere i colori prima di scrivere il codice.
Pratiche Consigliate
Sempre con fallback
Se il browser non supporta prefers-color-scheme, dovresti avere uno stile di default solido. Molti browser vecchi non lo supportano ancora, quindi il fallback è fondamentale.
Transizioni fluide
Quando l’utente cambia tema, usa transizioni CSS per ammorbidire il cambio. Una transizione di 0.3-0.5 secondi su background e color rende l’esperienza molto meno brusca.
Immagini responsive al tema
Considera se le tue immagini hanno buon contrasto su entrambi i temi. A volte conviene fornire versioni diverse â con filtri o sfondi adattati.
Comunica il cambio
Se l’utente cambia tema via toggle, fornisci feedback visivo. Un’icona che cambia, un suono leggero, o un breve messaggio di conferma aiuta l’utente a capire che l’azione è stata registrata.
Questo articolo fornisce informazioni educative su come implementare prefers-color-scheme e dark mode nei progetti web. Gli esempi e le tecniche descritte sono basati su standard web attuali e best practices di accessibilità . Sempre consulta la documentazione ufficiale MDN e WCAG per linee guida complete e aggiornate. Le implementazioni possono variare a seconda del tuo specifico contesto di progetto e dei browser che supporti.
Conclusioni
Implementare prefers-color-scheme non è complesso, ma richiede attenzione ai dettagli. Rispettare le preferenze di sistema è ormai uno standard atteso. Aggiungere un toggle manuale ti dà la flessibilità di lasciare il controllo all’utente.
Il combinato di questi due approcci â rilevamento automatico e toggle manuale â crea un’esperienza inclusiva. Gli utenti con problemi visivi apprezzano il contrasto giusto. Quelli che preferiscono il tema scuro per ridurre l’affaticamento notturno trovano l’ambiente che cercano. Tutti, in generale, apprezzano quando un sito rispetta le loro scelte.
Inizia a implementare prefers-color-scheme nei tuoi progetti oggi. à un investimento piccolo che ritorna in accessibilità e user satisfaction.
