Identificare il color scheme impostato usando Javascript

Mattepuffo's logo
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 this Post

Commentami!