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!
javascript matchmedia prefers-color-scheme
Commentami!