Cambiar el tema visual de una aplicación web con un solo clic y que esa preferencia se mantenga al refrescar la página es una funcionalidad que mejora enormemente la experiencia de usuario. Aquí se explica paso a paso cómo lograrlo usando JavaScript puro, manipulación del DOM y localStorage.
¿Cómo seleccionar el botón y agregar el evento de clic?
El primer paso es obtener una referencia al botón que activará el cambio de tema. Para eso se utiliza document.getElementById, almacenando el resultado en una constante llamada themeToggleButton [01:00].
javascript
const themeToggleButton = document.getElementById('toggle');
Una vez que se tiene la referencia, se le agrega un addEventListener con el evento click. Dentro de ese listener es donde ocurre toda la lógica del cambio de tema [01:18].
javascript
themeToggleButton.addEventListener('click', () => {
document.body.classList.toggle('dark-theme');
});
El método classList.toggle es fundamental aquí: si el body ya tiene la clase dark-theme, la elimina; si no la tiene, la agrega. Esto permite alternar entre el tema light y el tema dark con cada clic [01:30].
¿Por qué se aplica la clase al body?
Se trabaja directamente sobre la etiqueta body porque es el contenedor principal de toda la página. Al agregar o quitar la clase dark-theme en el body, los estilos CSS asociados modifican el background, los colores de texto y otros elementos visuales de forma global. Todo el CSS necesario para ambos temas ya debe estar definido previamente.
¿Cómo determinar qué tema está activo y guardarlo?
Después de hacer el toggle, es necesario saber cuál tema quedó activo para poder guardarlo. Esto se logra con classList.contains, que devuelve true o false según si el body contiene la clase indicada [02:20].
javascript
const theme = document.body.classList.contains('dark-theme') ? 'dark' : 'light';
Esta línea usa un operador ternario: si el body contiene la clase dark-theme, la variable theme será 'dark'; de lo contrario, será 'light'.
Con ese valor definido, se guarda en localStorage usando setItem [03:05].
javascript
localStorage.setItem('theme', theme);
Al verificar en la consola del navegador con localStorage, se puede confirmar que el valor se almacena correctamente. Si el tema es dark, aparece theme: "dark"; si es light, aparece theme: "light" [03:20].
¿Cómo mantener la persistencia del tema al refrescar?
Guardar el tema no es suficiente. Al refrescar la página, el navegador carga el HTML original sin la clase dark-theme. Por eso es necesario leer el valor de localStorage al cargar la página y, si corresponde, agregar la clase nuevamente [03:45].
javascript
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
document.body.classList.add('dark-theme');
}
Este bloque se ejecuta fuera del event listener, al momento en que el script se carga. Utiliza getItem para recuperar el tema guardado y classList.add para aplicar la clase si el valor es 'dark' [04:10].
¿Cuál es la diferencia entre classList.toggle, classList.add y classList.contains?
- classList.toggle: agrega la clase si no existe, la quita si ya existe.
- classList.add: solo agrega la clase sin verificar si ya está presente.
- classList.contains: devuelve un booleano indicando si el elemento tiene esa clase.
Cada uno cumple un rol distinto dentro de esta funcionalidad. El toggle se usa en el evento de clic, el add al cargar la página, y el contains para determinar qué valor guardar.
¿Cómo se ve el código completo?
javascript
const themeToggleButton = document.getElementById('toggle');
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
document.body.classList.add('dark-theme');
}
themeToggleButton.addEventListener('click', () => {
document.body.classList.toggle('dark-theme');
const theme = document.body.classList.contains('dark-theme') ? 'dark' : 'light';
localStorage.setItem('theme', theme);
});
Con estas pocas líneas se logra un sistema completo de cambio de tema con persistencia. El resultado final es una aplicación donde el usuario puede alternar entre dark y light, y su preferencia se conserva incluso después de cerrar y volver a abrir el navegador [04:50].
Si implementaste esta funcionalidad junto con las tareas, la edición y el borrado, comparte cómo personalizaste los estilos de cada tema.
