Salvare la scelta del tema

Fa parte della sezione JavaScript in azione del percorso HTML di Coddy. Lezione 17 di 27.

Quando gli utenti passano dal tema chiaro a quello scuro, vogliamo che il sito web ricordi la loro scelta.
A questo scopo, usiamo <strong>localStorage</strong> in JavaScript. Memorizza i dati nel browser e questi dati rimangono anche dopo aver aggiornato la pagina o chiuso il browser.

La logica è:

Quando l’utente cambia il tema, salva il tema corrente in localStorage.
Quando la pagina viene caricata, controlla localStorage e applica automaticamente il tema salvato.

HTML:

<button id="themeToggle">Toggle Theme</button>

CSS:

body.dark-mode {
  background-color: #222;
  color: #fff;
}

Questo codice verifica se l’utente ha salvato in precedenza un tema scuro in localStorage e lo applica al caricamento della pagina.

Quando si fa clic sul pulsante, la modalità scura viene attivata o disattivata nella pagina e poi aggiorna localStorage, così la preferenza viene ricordata alla visita successiva

const button = document.getElementById("themeToggle");

// Applica il tema salvato al caricamento della pagina
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
}

button.addEventListener("click", function () {
  document.body.classList.toggle("dark-mode");

  // Salva la preferenza
  if (document.body.classList.contains("dark-mode")) {
    localStorage.setItem("theme", "dark");
  } else {
    localStorage.setItem("theme", "light");
  }
});

Questo garantisce che la preferenza dell'utente venga mantenuta nelle visite successive al tuo sito.

Sfida

Facile

Crea un selettore del tema che ricordi le preferenze dell’utente.

Passaggi:

Al caricamento della pagina: verifica se l’utente ha selezionato in precedenza la modalità scura
1. Se in localStorage è salvato "dark", aggiungi la classe "dark-mode" al body
Quando si fa clic sul pulsante di selezione: passa dal tema chiaro a quello scuro e viceversa
1. Attiva o disattiva la classe "dark-mode" sull’elemento body
2. Salva il tema corrente in localStorage

Provalo tu

<!DOCTYPE html>
<html>
<head>
  <title>Theme Preference Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button id="themeToggle">Toggle Theme</button>

  <h1>Saving Theme Preference</h1>
  <p>
    Try switching between light and dark mode using the button above.  
    Refresh the page — your choice is remembered thanks to <strong>localStorage</strong>.
  </p>
  <script src="script.js"></script>
</body>
</html>