Identificare il color scheme impostato usando Javascript

Identificare il color scheme impostato usando Javascript

In questo articolo abbiamo visto come capire, usando i CSS, quale color schieme è usato nel sistema che visualizza la pagina (scuro o chiari).

Oggi vediamo la stessa cosa usando Javascript; non c'è bisogno di libreri esterne, in quanto useremo l'oggetto matchMedia.

Ecco il codice Javascript:

window.onload = function () {
    const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    const userPrefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;
    if (userPrefersDark) {
        console.log("Tema dark");
    }
    if(userPrefersLight) {
        console.log("Tema chiaro");
    }
}

Mi sembra abbastanza semplice.

Enjoy!




Share

Commentami!

About Mattepuffo.com

Blog dedicato all'informatica e alla programmazione!
Tutti i contenuti di questo blog, tranne casi particolari, sono sotto licenza Licenza Creative Commons Creative Commons Attribution-Noncommercial-Share Alike 2.5. .

2741 articoli
310 commenti
21 progetti
Altri link
  • About
  • Scrivimi
  • Copyright
  • Sitemap
  • matteo.ferrone@yahoo.it
  • GitHub
  • Privacy Policy