¿Quieres que tu aplicación recuerde el tema visual que eligió el usuario? Con un toggle de tema dark/light usando JavaScript y localStorage puedes alternar estilos con un clic y mantener la preferencia incluso después de refrescar la página. Esta guía es para quienes ya manejan HTML, CSS y bases de JavaScript.

La idea es simple: capturas el botón, escuchas su evento de clic, agregas o quitas una clase del body y guardas el estado en el almacenamiento local del navegador. Con eso resuelves dos cosas a la vez, el cambio visual y la persistencia.

¿Cómo selecciono el botón y escucho el clic en JavaScript?

Todo arranca seleccionando el elemento que disparará el cambio. Aquí entra en juego document.getElementById, que te permite traer el botón por su ID y guardarlo en una constante para reutilizarlo [01:23].

javascript const themeToggleButton = document.getElementById('toggle');

themeToggleButton.addEventListener('click', () => { document.body.classList.toggle('dark-theme'); });

Lo interesante de classList.toggle es que hace dos trabajos en uno: si la clase no existe en el body, la agrega; si ya está, la quita. Eso te ahorra escribir condicionales para alternar entre el tema light y el dark.

¿Qué hace classList.toggle en JavaScript? Agrega una clase al elemento si no la tiene y la elimina si ya está presente. Es ideal para alternar estados visuales como temas o menús abiertos.

¿Cómo detecto qué tema está activo en el body?

Necesitas saber si el body tiene o no la clase dark-theme para decidir qué guardar. Para eso usas classList.contains, que te devuelve true o false según si la clase está aplicada [02:45].

javascript const theme = document.body.classList.contains('dark-theme') ? 'dark' : 'light';

Esta línea usa un operador ternario: si la condición se cumple, theme vale dark; si no, vale light. Es una forma compacta de escribir un if/else cuando solo necesitas asignar un valor.

¿Por qué validar la clase en lugar de un estado interno?

Porque el body ya es tu fuente de verdad visual. En lugar de mantener una variable aparte que podría desincronizarse, lees directamente del DOM lo que está pasando en pantalla.

¿Cómo guardo el tema con localStorage para que persista?

Aquí entra el protagonista del ejercicio: localStorage, una API del navegador que guarda pares de clave y valor en formato texto, y que sobrevive aunque cierres la pestaña [03:30].

javascript themeToggleButton.addEventListener('click', () => { document.body.classList.toggle('dark-theme'); const theme = document.body.classList.contains('dark-theme') ? 'dark' : 'light'; localStorage.setItem('theme', theme); });

Con setItem guardas el valor bajo la clave theme. Puedes verificarlo abriendo la consola del navegador y escribiendo localStorage, donde verás algo como theme: "dark" o theme: "light" según lo que hayas elegido.

¿Qué es localStorage? Es un almacenamiento del navegador que guarda datos en formato clave-valor de manera persistente. Los datos se mantienen incluso al cerrar el navegador, hasta que los borres manualmente.

¿Cómo aplico el tema guardado al refrescar la página?

Guardar no sirve de nada si al recargar todo vuelve al estado inicial. Por eso necesitas leer el valor de localStorage al cargar la página y aplicar la clase correspondiente al body [04:50].

javascript const currentTheme = localStorage.getItem('theme');

if (currentTheme === 'dark') { document.body.classList.add('dark-theme'); }

Usas getItem para recuperar lo que guardaste antes. Si el valor es dark, aplicas la clase con classList.add y el tema oscuro queda activo desde el primer render. Si es light, no haces nada porque ese ya es el estado por defecto.

¿Qué diferencia hay entre classList.add y className?

Un detalle que puede confundirte: className reemplaza todas las clases del elemento, mientras que classList.add solo agrega la que le pasas sin tocar las demás. Para este caso siempre quieres classList.add, porque tu body puede tener otras clases que no debes borrar.

Habilidades y conceptos que aplicaste

Este ejercicio te deja varias herramientas concretas para tu caja de trabajo frontend.

• Manipulación del DOM con document.getElementById y document.body para acceder a elementos HTML desde JavaScript.
• Manejo de eventos con addEventListener y el evento click, base de toda interacción de usuario.
• classList API, con sus métodos toggle, contains y add para gestionar clases CSS dinámicamente.
• Operador ternario como alternativa concisa al if/else cuando asignas valores.
• localStorage con setItem y getItem para persistir datos entre sesiones del navegador.

La lógica completa también aplica a otras preferencias del usuario, como idioma, tamaño de fuente o densidad de la interfaz. Cambias la clave de localStorage y el nombre de la clase, y tienes un patrón reutilizable.

¿Qué otra preferencia te gustaría guardar con localStorage en tu próximo proyecto? Cuéntalo en los comentarios.