Modalità oscura automatica con JavaScript

Una delle funzionalità più richieste nelle applicazioni è la modalità oscura. Per molti utenti, la modalità oscura fornisce un'interfaccia più intuitiva con meno toni bianchi che possono causare affaticamento degli occhi. La modalità oscura è anche nota per risparmiare la durata della batteria sugli schermi AMOLED.

Spesso i web designer utilizzano la prefers-color-schemefunzione multimediale CSS per fornire un tema diverso quando è abilitata la modalità oscura. prefers-color-schemeottiene la preferenza dell'utente tramite l'impostazione del sistema operativo o l'impostazione dell'agente utente. Ecco un semplice esempio:

/* Style rules for dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}
/* Style rules for light mode */
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

const darkMode = window.matchMedia("(prefers-color-scheme:dark)").matches;

La modalità oscura è una funzionalità estremamente utile per la maggior parte degli utenti. Approfitta del matchMedia()metodo per fornire un'esperienza migliore ai tuoi utenti.

Se ti è piaciuto questo articolo, potrebbe piacerti anche il libro di Faraz Kelhini, Modern Asynchronous JavaScript . Fino al 15 maggio 2022, puoi utilizzare il codice promozionale fkajs_medium_35 per risparmiare il 35% sulla versione ebook. I codici promozionali non sono validi su acquisti precedenti.

Articoli di Faraz Kelhini