0Pricing
CSS Academy · Lezione

Media query prefers-color-scheme

Rilevi la preferenza del sistema dell’utente per la modalità chiara o scura utilizzando la media query prefers-color-scheme.

Media query prefers-color-scheme è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

Perché usare la modalità scura automatica?

Molti utenti abilitano la modalità scura a livello di sistema operativo per maggiore comfort, per risparmiare batteria (sugli schermi OLED) o per esigenze di accessibilità. La media query prefers-color-scheme rileva questa preferenza e consente al sito di adattarsi automaticamente.

Valori della query

Due valori:

  • light: l'utente preferisce uno schema di colori chiaro (o non ha espresso preferenze)
  • dark: l'utente preferisce la modalità scura
<p>This page respects your OS dark mode setting.</p>

Modalità scura mobile-first

Se la maggior parte degli utenti utilizza dispositivi mobili OLED, si consideri l'uso della modalità scura come stile di base:

<p>Dark by default; switches to light in light mode.</p>

Approccio con variabili CSS

L'implementazione più ordinata consiste nel definire un set di token per ogni schema:

<div class="card">Themed card using CSS variables</div>

Immagini in modalità scura

Ridurre la luminosità delle immagini in modalità scura per evitare immagini abbaglianti:

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'><rect width='200' height='120' fill='%23ff6347'/></svg>" alt="demo" />

Rilevamento in JavaScript

Controllare la preferenza per la modalità scura in JavaScript per ottenere un comportamento dinamico:

<p id="theme-status">Checking...</p>
<script>
  const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  document.getElementById('theme-status').textContent = isDark ? 'System is in DARK mode' : 'System is in LIGHT mode';
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    document.getElementById('theme-status').textContent = e.matches ? 'System is in DARK mode' : 'System is in LIGHT mode';
  });
</script>

Test in DevTools

In Chrome DevTools → scheda Rendering → Emulate CSS prefers-color-scheme. È possibile alternare la modalità chiara e quella scura senza modificare le impostazioni del sistema operativo. In Firefox: DevTools → scheda Inspector → menu dell'icona a forma di occhio.

Principi cromatici della modalità scura

Una modalità scura efficace:

  • Utilizza il grigio scuro, non il nero puro, per gli sfondi: riduce l'affaticamento degli occhi
  • Riduce le ombre di elevazione: utilizza tonalità di sfondo più chiare per le superfici più elevate
  • Rende i colori dei bordi più chiari per migliorarne la visibilità
  • Verifica i rapporti di contrasto del testo: potrebbero essere necessari rapporti diversi

Anti-pattern dell'inversione dei colori

Non invertire semplicemente tutti i colori con filter: invert(1) per creare la modalità scura. Le immagini e le icone assumerebbero colori anomali. Utilizzare token appropriati per la modalità scura, con colori adeguati per ogni elemento.

Prestazioni: evitare il flash

Se si utilizza il cambio di tema gestito da JavaScript, prevenire un Flash of Unstyled Theme (FOUT) applicando la classe del tema a <html> in modo sincrono, all'interno di un tag <script> nel <head>, prima del rendering della pagina.

Colore del tema nei metadati

Aggiornare il colore dell'interfaccia del browser, ovvero della barra degli indirizzi mobile e del selettore delle app, in modo che corrisponda al tema scuro:

<pre class="code-sample">&lt;meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff"&gt;
&lt;meta name="theme-color" media="(prefers-color-scheme: dark)"  content="#1a1a2e"&gt;</pre>

Verifica rapida

Quale valore della media query si deve utilizzare per applicare gli stili della modalità scura quando il sistema operativo è impostato sulla modalità scura?

Riepilogo

prefers-color-scheme: dark rileva la preferenza del sistema operativo per la modalità scura. Implementare automaticamente la modalità scura utilizzando variabili CSS che sostituiscono i valori dei token all'interno della media query. Ridurre la luminosità delle immagini in modalità scura. Eseguire i test in DevTools. Aggiornare il meta tag theme-color del browser per un'esperienza mobile completa.

Domande Frequenti

La lezione «Media query prefers-color-scheme» è gratuita?

Sì — il testo completo di «Media query prefers-color-scheme» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «Media query prefers-color-scheme»?

Rilevi la preferenza del sistema dell’utente per la modalità chiara o scura utilizzando la media query prefers-color-scheme. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Media query prefers-color-scheme»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione CSS Academy?

Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Media query prefers-color-scheme
  2. Variabili CSS per i temi
  3. Proprietà color-scheme
  4. Attivazione automatica e manuale della modalità scura
← Torna a CSS Academy