Guardar preferencia de tema

Parte de la sección JavaScript in Action del Journey de HTML de Coddy. Lección 17 de 27.

Cuando los usuarios cambian entre los temas claro y oscuro, queremos que el sitio web recuerde su elección.
Para esto, usamos <strong>localStorage</strong> en JavaScript. Este almacena datos en el navegador, y estos datos permanecen incluso después de que la página se actualice o el navegador se cierre.

La lógica es:

Cuando el usuario cambia el tema, guarda el tema actual en localStorage.
Cuando la página se carga, consulta localStorage y aplica el tema guardado automáticamente.

HTML:

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

CSS:

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

Este código comprueba si el usuario guardó previamente un tema oscuro en localStorage y lo aplica cuando se carga la página.

Cuando se hace clic en el botón, se alterna el modo oscuro en la página y luego se actualiza localStorage para que la preferencia se recuerde en la próxima visita

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

// Aplicar el tema guardado al cargar la página
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
}

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

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

Esto garantiza que la preferencia del usuario se mantenga en las distintas visitas a su sitio.

Desafío

Fácil

Crea un interruptor de tema que recuerde la preferencia del usuario.

Pasos:

Al cargar la página: Comprueba si el usuario seleccionó previamente el modo oscuro
1. Si "dark" está guardado en localStorage, añade la clase "dark-mode" al body
Cuando se hace clic en el botón de alternancia: Cambia entre los temas claro y oscuro
1. Alterna la clase "dark-mode" en el elemento body
2. Guarda el tema actual en localStorage

Pruébalo tú mismo

<!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>