Cambio de Tema Dinámico y Persistente en Aplicaciones Web

¿Cómo podemos implementar un botón para cambiar el tema de una aplicación?

A menudo queremos ofrecer a los usuarios la opción de personalizar la apariencia de nuestra aplicación web. Una de las funcionalidades favoritas es la de cambiar el tema entre claro (light) y oscuro (dark). Este tutorial te llevará por el proceso de implementación de un botón de alternancia de tema que recuerda la elección del usuario incluso al actualizar la página.

Preparación del entorno

Para empezar, necesitamos seleccionar el botón encargado de alternar el tema. Usaremos el método getElementById en document para obtener una referencia al botón de alternancia por su ID. Una vez tenemos la referencia, debemos agregar un evento que se dispare al hacer clic. Para ello, utilizamos addEventListener:

const tempToggleButton = document.getElementById('toggleButton');

tempToggleButton.addEventListener('click', () => {
    document.body.classList.toggle('darkTheme');
});

Este sencillo fragmento de código permitirá que, al hacer clic en el botón, se agregue o quite la clase darkTheme del elemento body. De este modo, podremos ver el cambio visual en los estilos definidos para la clase darkTheme.

Implementación de la persistencia del tema

El siguiente paso es asegurarnos de que la preferencia del usuario se mantenga incluso después de recargar la página, algo vital para mejorar la experiencia del usuario. Para lograr la persistencia del tema, utilizaremos localStorage. Primero, validamos si el body contiene la clase darkTheme y almacenamos el resultado:

const theme = document.body.classList.contains('darkTheme') ? 'dark' : 'light';
localStorage.setItem('theme', theme);

Verificación del tema al cargar la página

Una vez almacenada la elección del usuario en localStorage, es importante que cada vez que la página cargue, verifiquemos este almacenamiento y ajustemos el tema en consecuencia. Podemos lograrlo con la siguiente validación al inicio de nuestro script:

const currentTheme = localStorage.getItem('theme');
if (currentTheme === 'dark') {
    document.body.classList.add('darkTheme');
}

Con esta lógica, al recargar la página, el tema seleccionado se mantiene de acuerdo con el valor guardado en localStorage.

Probando y asegurando la funcionalidad

Para asegurarte de que todo funcione correctamente, realiza una última verificación asegurándote de alternar entre temas y de que esta selección resista los reinicios de sesión:

1. Cambia al tema oscuro, verifica que localStorage contiene theme = dark.
2. Actualiza la página y verifica que el tema oscuro persista.
3. Haz clic para volver al tema claro, comprueba que localStorage ahora tenga theme = light.

Consejos adicionales

• Revisa que todos los estilos CSS necesarios estén correctamente definidos para ambas clases de tema.
• Asegúrate de que los cambios de tema no interfieran con otros estilos visuales.
• Considera añadir animaciones suaves para mejorar la transición entre temas.

La implementación efectiva y la persistencia del tema mejoran la accesibilidad y personalización de tu aplicación. ¡Sigue aprendiendo y mejorando la experiencia de tus usuarios!