Sono le undici di sera. Un tuo cliente ha il telefono in modalità scura, apre un link al tuo sito e si ritrova davanti una pagina bianca che illumina la stanza. Non chiuderà la scheda per questo, ma il primo impatto se lo ricorderà.
Con macOS Mojave, iOS 13 e Android 10 la modalità scura è diventata un’impostazione di sistema, e chi la attiva si aspetta che app e siti la rispettino. Chrome, Firefox, Safari ed Edge leggono questa preferenza con una media query, prefers-color-scheme. Se i colori del tuo CSS sono già definiti come variabili, il lavoro si riduce a poche righe:
@media (prefers-color-scheme: dark) {
:root { --sfondo: #121417; --testo: #e6e6e6; }
}Il resto del foglio di stile continua a usare le stesse variabili e cambia tema da solo. Se invece i colori sono scritti a mano in cento regole diverse, il primo passo è raccoglierli in variabili: ti servirà anche per qualsiasi restyling futuro.
Invertire i colori non basta
Il nero assoluto con il testo bianco puro stanca la vista più di quanto sembri. Meglio un grigio molto scuro per lo sfondo e un bianco leggermente attenuato per il testo. I colori di accento che sul bianco funzionano, sul fondo scuro tendono a vibrare: abbassane un po’ la saturazione. E ricontrolla il contrasto da capo, perché deve restare almeno 4,5:1 per il testo normale anche nel tema scuro.
Poi ci sono i dettagli che si notano solo provando. Un logo nero su sfondo trasparente sparisce: prepara una versione chiara e servila con l’elemento <picture> e la stessa media query. Le ombre, che sul bianco separano i livelli, sul fondo scuro non si vedono più; al loro posto usa superfici leggermente più chiare.
L’ultima parola spetta a chi legge
La preferenza di sistema è un buon punto di partenza, non un obbligo. C’è chi tiene il telefono scuro ma preferisce leggere i testi lunghi su fondo chiaro. Un interruttore che salva la scelta in localStorage e prevale sulla media query accontenta entrambi.
Stasera, prima di spegnere, attiva la modalità scura sul telefono e apri il tuo sito. Bastano due minuti per capire quanto lavoro ti aspetta.
