Come funziona la Dark Mode in Javascript

Che cosa realizzeremo in questo progetto ?

In questo progetto andremo a creare una pagina che presenta semplicemente un titolo ed un pulsante. Al click sul pulsante, ciò che andremo a fare sarà il cambio di modalità da chiara a scura e viceversa.

Catturare i nodi dal DOM

In questo progetto ci basterà selezionare i node degli unici due elementi presenti nella pagina. Per entrambi andremo ad utilizzare il metodo getElementById

const title = document.getElementById("title");
const btn = document.getElementById("btn");

Inoltre andremo a dichiarare una variabile e la inizializzeremo a zero. Questa ci servirà per effettuare il controllo che modificherà il tema della pagina.

let count = 0;

Funzione che modifica il tema

Successivamente andrmeo a dichiare una funzione, la quale avrà il compito di accedere alle proprietà di stile dei nodi catturati dal DOM, e di modificarle in base al tema già presente.

Tramite un if andremo a controllare il valore della variabile count, la quale può assumere esclusivamente i valori di zero ed uno. Questo perche, nel caso in cui sia uguale a zero andremo a modificare lo stile della pagina per renderla scura, per infine incrementare la variabile di uno. Nel caso in cui, invece, il contatore sia a uno, andremo a risettare il tema originale, decrementando di uno la variabile count.

function changeMod() {
  if (count === 0) {
    document.body.style.backgroundColor = "var(--background-color)";
    title.style.color = "var(--extra-dark-gray)";
    btn.style.backgroundColor = "var(--optional)";
    count++;
  } else {
    document.body.style.backgroundColor = "var(--extra-dark-gray)";
    title.style.color = "var(--background-color)";
    btn.style.backgroundColor = "var(--primary)";
    btn.style.color = "var(--tertiary)";
    count--;
  }
}

I valori delle proprietà di stile vengono settati utilizzando le variabili css dichiarate nell'apposito foglio di stile.

Attendere un evento con addEventListener

Infine, come ultima cosa, andremo ad utilizzare sul nodo del bottone, il metodo addEventListener. Questo metodo accetta come primo parametro il tipo di evento che stiamo attendendo, e come secondo parametro la funzione che verrà invocata nel momento in cui l'evento si verifica.

btn.addEventListener("click", changeMod);