Tema chiaro/scuro con @media (prefers-color-scheme)

Come creare un tema chiaro/scuro che rispetta le impostazioni di sistema dell'utente.

Oggi quasi tutti i sistemi operativi (iOS, Android, Windows, macOS) hanno un’impostazione globale chiamata “Dark Mode” (Modalità Scura). Quando un utente la attiva, spesso si aspetta che anche i siti web rispettino quella preferenza.

Come facciamo a far sapere al nostro sito se il telefono dell’utente è in modalità chiara o scura? Possiamo usare una speciale Media Query chiamata prefers-color-scheme.

Media query + variabili CSS

Un modo pulito per creare un tema scuro è sfruttare le variabili CSS che abbiamo imparato nelle lezioni precedenti.

Invece di scrivere due volte tutto il CSS del sito, dichiariamo una “tavolozza” di colori di default (chiara) nel :root. Poi usiamo la media query per sovrascrivere quella tavolozza se l’utente preferisce il tema scuro.

/* 1. TEMA DI DEFAULT (Light Mode) */
:root {
  --sfondo-sito: #ffffff;
  --testo-principale: #111111;
  --sfondo-card: #f8f9fa;
  --colore-bordo: #dddddd;
}

/* 2. TEMA SCURO (Dark Mode Automatica) */
@media (prefers-color-scheme: dark) {
  :root {
    /* Sovrascriviamo le stesse variabili con colori scuri. */
    --sfondo-sito: #121212;
    --testo-principale: #f1f1f1;
    --sfondo-card: #1e1e1e;
    --colore-bordo: #333333;
  }
}

/* 3. UTILIZZO */
body {
  background-color: var(--sfondo-sito);
  color: var(--testo-principale);
}

.card {
  background-color: var(--sfondo-card);
  border: 1px solid var(--colore-bordo);
}

Perché questo approccio funziona

Tutto il CSS “strutturale” della pagina (i body e i .card) è stato scritto una sola volta. Non devono sapere se il sito è chiaro o scuro: usano i colori definiti dalle variabili --sfondo-sito, --testo-principale e simili. È la media query in alto che cambia i valori quando l’utente preferisce il tema scuro.

(Nota: questo approccio segue automaticamente l’impostazione del sistema operativo. Se vuoi aggiungere un controllo manuale per cambiare tema, avrai bisogno di JavaScript per modificare una classe o un attributo sul documento).