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!