Rilevare il dark mode in JavaScript: snippet con matchMedia

Questo snippet JavaScript rileva se l’utente ha impostato il computer in dark mode, ovvero in modalità scura. In quel caso restituisce true. È un pezzo di codice che può aiutarti a migliorare il tuo sito o la tua applicazione, rendendoli più accessibili a chi preferisce la modalità scura.

Dark mode in JavaScript

const isDarkMode = () =>
	globalThis.matchMedia?.("(prefers-color-scheme:dark)").matches ?? false;

// Uso
isDarkMode();

Che cos’è il dark mode o modalità scura?

Il dark mode è una funzione che permette di cambiare la palette di colori del dispositivo con una tonalità più scura. Molte persone preferiscono la modalità scura perché riduce l’affaticamento degli occhi e rende più facile leggere il testo sullo schermo. La modalità scura è disponibile su moltissimi dispositivi, tra cui smartphone, portatili e tablet.

Se lavori su applicazioni in JavaScript, poter offrire una modalità scura migliora il comfort dei tuoi utenti mentre usano la tua applicazione.

Come attivare o disattivare la modalità scura?

Ecco come attivare i temi scuri sui dispositivi e nelle applicazioni più diffuse, con Windows, Android, Mac e iOS:

Windows

1. Dal menu Start, seleziona Impostazioni e Personalizzazione.
2. Seleziona la voce Sfondo nella parte sinistra dello schermo. Puoi scaricare un tuo tema scuro oppure sceglierne uno fornito da Windows.
3. Seleziona la voce Colori nella parte sinistra dello schermo. Puoi scegliere un colore più riposante per gli occhi, come il grigio, il beige o un giallo o un blu smorzati (a tua scelta).
4. Prova il colore scelto nel tema scuro facendo clic su Scuro nella voce Scegli la modalità app predefinita. Se i colori scelti non ti convincono, riprova con altri!

Android

1. Vai in Impostazioni, poi in Accessibilità e infine in Display.
2. Tocca il tema Scuro per applicarlo, oppure Usa inversione colori per applicare l’inversione.

MacOS

1. Vai in Preferenze di Sistema.
2. Fai clic su Generali.
3. Scegli l’aspetto che ti sembra più adatto. Ci sono l’opzione chiara, quella scura e quella automatica, che cambia in base all’ora della giornata.

iOS

1. Vai in Impostazioni.
2. Seleziona Schermo e luminosità.
3. Attiva o disattiva la modalità scura.

Conclusione

La modalità scura porta comodità ai tuoi utenti: aggiungerla alle tue applicazioni è un vantaggio tutt’altro che trascurabile.

Se cerchi altri articoli su JavaScript e altri trucchi, puoi consultare i miei articoli su JavaScript.