Modo oscuro persistente con CSS y JS

Cómo hacer que el modo oscuro del sitio web sea persistente con el Almacenamiento Local

by Tibor Kopca Date: 25-12-2020 javascript css webdev programacion modo oscuro desarollo web


Recientemente escribimos acerca de cómo hacer un modo de color o tema alternativo intercambiable, una característica muy útil y popular para los sitios web. El artículo de hoy tratará sobre cómo almacenar la configuración de un usuario en su sitio web, específicamente, cómo guardar la configuración del modo oscuro y restaurarla cuando un usuario vuelve a su página.

Esta sería una pequeña actualización de nuestro artículo anterior sobre cómo crear un tema de modo oscuro en su sitio web.

Dado que los navegadores y servidores web utilizan el protocolo HTTP, que no tiene estado, eso era necesario para que el sitio web "recordara" información de estado como el inicio de sesión, los botones pulsados por el usuario, las preferencias del sitio, los artículos añadidos al carrito de la compra, los campos de formulario previamente introducidos, etc.

¿Por qué necesitamos la persistencia?

Bueno, la funcionalidad por defecto de los navegadores es mostrar los datos que vienen de un servidor y no almacena nada - es apátrida. Si tenemos una página web o alguna funcionalidad implementada en nuestra página que haga que la página se actualice, o simplemente el usuario pulsa F5, la página se establecerá en el estado por defecto. Esto significa que el código JavaScript para el cambio de color se volverá a poner en el estado por defecto y todos los cambios o configuraciones hechas por el usuario se perderán - la página se verá de nuevo como recién cargada - en nuestro caso el color por defecto es el tema del día.

Un desarrollador web puede implementar una funcionalidad para recordar algunos datos, como nuestros botones o el campo de formulario previamente rellenado, o cambios en el tamaño del texto por ejemplo si es necesario. Y es por eso que se utiliza el almacenamiento local u otros métodos de almacenamiento de los datos. Con ellos podemos almacenar localmente la configuración de nuestro botón en el navegador del cliente (en el ordenador del usuario), de modo que cada vez que el usuario visite o acceda a nuestro sitio web tendrá el botón para el modo oscuro en el estado en que se encontraba la última vez. Los datos que queremos allí básicamente "persisten" incluso cuando el navegador se cierra y se vuelve a abrir.

Y el conocimiento de cómo almacenar y mantener alguna configuración del sitio web en el navegador del cliente es muy útil también en otros proyectos, así que vamos a entrar en ello.

Usando el almacenamiento local

Con los mecanismos de la API de almacenamiento web como localStorage o sessionStorage podemos almacenar pares clave/valor, de una manera mucho más intuitiva que usando cookies.
 

LocalStorage es similar a sessionStorage, excepto que mientras los datos almacenados en localStorage no tienen tiempo de caducidad, y los datos almacenados no se borran cuando la sesión de la página termina -es decir, cuando se cierra la página los datos de sessionStorage se borrarán en sessionStorage, pero los datos de localStorage persisten incluso cuando se cierra y se vuelve a abrir el navegador.

Por lo tanto, localStorage almacena los datos sin fecha de caducidad, y se borra sólo a través de JavaScript, o limpiando la caché del navegador / datos almacenados localmente, el límite de almacenamiento es el máximo de los tres sistemas - 10MB. Por ejemplo, las cookies sólo tienen 4kB y sessionStorage 5MB.

¡Codifiquémoslo!

La última vez mostramos que con esta parte del código JS manipulamos las clases de elementos HTML y con ello podemos establecer qué selectores CSS se están utilizando actualmente. En resumen, cuando el usuario haga clic en el botón, el código alternará entre el cuerpo tiene O no tiene la clase oscura y la clase botón activa.

const switchButton = document.getElementById('switch');
 
switchButton.addEventListener('click', () => {
document.body.classList.toggle('dark'); //cambiar el cuerpo del HTML por la clase 'dark'
switchButton.classList.toggle('active');
//cambiar el botón HTML con el id='switch' con la clase 'active'
});

Ahora es el momento de codificar la parte de almacenamiento local.


Lo que necesitamos es comprobar si el modo "oscuro" está seleccionado, y si no almacenamos el valor diciendo específicamente que tiene modo de luz, porque si sólo almacenamos el valor del modo oscuro, la próxima vez que el usuario seleccione el modo de luz no se almacenará el cambio y sólo el modo oscuro estará siempre encendido para siempre.


Este es el código para ello. Primero comprobamos si el cuerpo tiene la clase "oscuro" activa y luego establecemos el localStorage con el método .setItem con dos informaciones en él, la clave y el valor - la clave sería "modo oscuro" para que sepamos al mirar la información lo que representa, y el valor sería "habilitado" por ejemplo.

const switchButton = document.getElementById('switch');
const workContainer = document.getElementById('work');
 
switchButton.addEventListener('click', () => {
    document.body.classList.toggle('dark'); //cambiar el cuerpo del HTML por la clase 'dark'
    switchButton.classList.toggle('active');//cambiar el botón HTML con el id='switch' con la clase 'active'
    workContainer.classList.toggle('dark');
 
   if(document.body.classList.contains('dark')){ //cuando el cuerpo tiene la clase 'dark' actualmente
        localStorage.setItem('darkMode', 'enabled'); //almacenar estos datos si el modo oscuro está activado
    }else{
        localStorage.setItem('darkMode', 'disabled'); //almacenar estos datos si el modo oscuro está desactivado
    }
});

Y cuando revisamos el sitio web en el inspector del navegador (después de refrescar la página), en la pestaña de almacenamiento podemos ver la información que se está guardando, tal como queríamos.

Persistent_Dark_Mode_localstorage_browser_inspector_dark_mode_enabled
¿Cómo sabemos si el usuario ha vuelto a nuestro sitio con la información de qué tipo de tema ha seleccionado la última vez? Necesitamos comprobar esta información, con el uso del método .getItem de localStorage, así:

const switchButton = document.getElementById('switch');
const workContainer = document.getElementById('work');
 
switchButton.addEventListener('click', () => {
    document.body.classList.toggle('dark'); //cambiar el cuerpo del HTML por la clase 'dark'
    switchButton.classList.toggle('active');//cambiar el botón HTML con el id='switch' con la clase 'active'
    workContainer.classList.toggle('dark');
 
   if(document.body.classList.contains('dark')){ //cuando el cuerpo tiene la clase 'dark' actualmente
        localStorage.setItem('darkMode', 'enabled'); //almacenar estos datos si el modo oscuro está activado
    }else{
        localStorage.setItem('darkMode', 'disabled'); //almacenar estos datos si el modo oscuro está desactivado
    }
});
 
if(localStorage.getItem('darkMode') == 'enabled'){
    document.body.classList.toggle('dark');
    switchButton.classList.toggle('active');
    workContainer.classList.toggle('dark');
}

Fíjate que cuando comprobamos si el "darkMode" tiene el valor "enabled", este valor no es booleano, sino de tipo cadena, por lo que tiene que estar entre comas. La comprobación de si el modo oscuro está desactivado no es necesaria, porque la página se cargará por defecto sin la clase de modo oscuro.
Otro detalle es que tenemos que establecer en consecuencia la posición del botón, para que represente el estado correcto, sin esto tendríamos un lío con la página en modo oscuro y el botón que nos muestra el modo claro está activado.


Ahora es posible refrescar la página (F5) y no perder la configuración que hemos establecido en el sitio web. Y esto es muy útil incluso con otros tipos de ajustes de los elementos interactivos. Por ejemplo, cuando se necesita guardar algo durante largos períodos de tiempo, como la información de la cesta de la tienda electrónica o para almacenar el estado de la interfaz de usuario.


Sólo una nota: Si estás interesado en la sintaxis que eliminará la información de localStorage que hemos añadido, debería ser así:

localStorage.removeItem('darkMode');
localStorage.clear(); //La sintaxis para eliminar todos los artículos de LocalStorage

Conclusión

Este ejemplo mostró cómo podemos utilizar el Web Storage - específicamente el Almacenamiento Local - para mantener la información en el navegador de un usuario durante períodos de tiempo más largos y explotar esta técnica para almacenar la configuración del aspecto visual de nuestro sitio web.


Los datos o configuraciones no se borrarán cuando se cierre el navegador, y estarán disponibles en cualquier momento en que el usuario vuelva a visitar la página, lo que nos permite emplear la interactividad en nuestro sitio.

Explicamos cómo crear el código JavaScript para mostrar el estado del sitio web tal como se estableció la última vez a través de sesiones y cierres del dispositivo o del navegador, y esta persistencia del lado del cliente puede ser utilizada en una variedad de situaciones.

 
by Tibor Kopca Date: 25-12-2020 javascript css webdev programacion modo oscuro desarollo web visitas : 1358  
 
Tibor Kopca

Tibor Kopca

From tinkering with computers as a teenager, through a career in datacenter he stepped into web development with full force and started coding. Absorbs all information like a sponge.
Fan of aerospace, engineering, information technologies and watches.

 
 
 

Artículos relacionados

Las ventanas gráficas o viewports grandes, pequeñas y dinámicas

Recientemente se han introducido algunos cambios en materia de unidades de ventana gráfica o viewport. Las novedades -que forman parte de la especificación de valores y unidades CSS de nivel 4-…

Cómo enviar un correo electrónico desde un formulario de contacto HTML

En el artículo de hoy vamos a escribir sobre cómo hacer un formulario que funcione y que al pulsar ese botón de envío sea funcional y envíe el correo electrónico…

Imágenes de fondo responsivas con relación de aspecto fijo o fluido

¿Cuál es la forma más fácil de escalar las imágenes de fondo en los diseños responsivos? Utilizamos una antigua técnica y la mejoramos para cambiar con fluidez la ratio de…

Cómo hacer un sitio web multilingüe sin redireccionamiento

Hoy, vamos a hablar de cómo implementar un simple selector de idioma en el sitio web estático o básico, sin necesidad de ningún backend o llamadas a la base de…

Comenzando con Bootstrap-Vue paso a paso

Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…

Bootstrap 5 beta2. ¿Qué ofrece?

Dado que el lanzamiento de Bootstrap 4 es de tres años, en este artículo vamos a presentar lo que es nuevo en el marco más popular del mundo para la…

Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch

Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch En mi artículo anterior, "Usando la Api Fetch Para Hacer Llamadas Ajax", hablé de los fundamentos de la API Fetch.…

Creación de un sencillo spinner-loader CSS

En el artículo de hoy mostraremos cómo animar un loader básico que gira cuando se define alguna acción predefinida, como cargar una imagen. Eso se puede utilizar en un sitio…

Los mejores selectores de fechas para Bootstrap y tu aplicación

Los selectores de fecha son widgets que permiten a los usuarios elegir una sola fecha o rango de fechas y horas. Es un elemento habitual para todo usuario de Internet,…

Validación de formularios HTML usando BULMA y vanilla JavaScript

Hoy vamos a escribir sobre los formularios de contacto y cómo validarlos usando JavaScript. El formulario de contacto parece ser una de las características principales de toda página web básica. Es…

Cómo usar el efecto Parallax.Js en tu sitio web

Hoy vamos a escribir sobre el efecto de parallax, similar al desplazamiento de parallax, y cómo implementarlo para mejorar su página de aterrizaje. En webdev, dicen que primero el móvil…

Usando la API FETCH para hacer llamadas AJAX - Una promesa cumplida

En este artículo hablamos sobre lo que son las llamadas AJAX y cómo utilizarlas de forma tradicional, utilizando el objeto XMLHttpRequest (XHR). En resumen, gracias a las llamadas AJAX una…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración