Che cos’è prefers-color-scheme?

prefers-color-scheme è una funzionalità multimediale CSS che comunica ai siti web se preferisci un tema scuro o chiaro. I browser rilevano questa preferenza dall’impostazione della modalità scura del sistema su Windows, macOS, Linux, Android o iOS, e i siti modificano i propri colori usando @media (prefers-color-scheme: dark) in CSS o window.matchMedia("(prefers-color-scheme: dark)") in JavaScript. Se un sito rimane chiaro mentre il sistema è impostato sulla modalità scura, la prima cosa da controllare è cosa rileva effettivamente il browser.

Descrizione dello strumento

Questo strumento mostra il tema del sistema in un unico riquadro ben visibile: Scuro con una luna oppure Chiaro con un sole. Chiede al browser se corrisponde a prefers-color-scheme: dark e ascolta eventuali modifiche, così quando passi dalla modalità scura a quella chiara o viceversa nelle impostazioni del dispositivo, il risultato si aggiorna subito senza ricaricare la pagina. Qualsiasi valore diverso da scuro viene mostrato come Chiaro.

Il risultato corrisponde a ciò che il browser comunica ai siti web e non sempre coincide con l’impostazione del sistema. Firefox, ad esempio, dispone di un’impostazione Aspetto dei siti web che può rendere tutti i siti chiari o scuri, indipendentemente dalla modalità del sistema.

Funzionalità

  • Mostra a colpo d’occhio se il tema è Scuro o Chiaro
  • Si aggiorna in tempo reale quando cambi il tema del sistema
  • Funziona nel browser, senza bisogno di installare nulla