Modo oscuro persistente con CSS y JS

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


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 Date: 25-12-2020 javascript css webdev programacion modo oscuro desarollo web visitas : 4578  
 
 
 
 

Artículos relacionados

Nuevas unidades de ventana gráfica - CSS

'Intercop 2022' es un proyecto anunciado por Google, Microsoft, Apple y la fundación Mozzilla para que todos los navegadores ofrezcan la misma experiencia web. El proyecto tiene 15 áreas de enfoque…

Container queries: libera el poder de escribir media queries

El diseño web responsivo ha sido una práctica común durante años, permitiendo que los sitios se adapten y se vean bien en una variedad de dispositivos y tamaños de pantalla.…

¿Por qué no deberíamos usar el color negro?

A día de hoy es cada vez más frecuente que las páginas cuenten con la opción de ponerlas en modo oscuro, o que directamente basen su estética en los colores…

Utilidades de los selectores :where y :is

Si aún no has oído hablar de estos selectores de pseudoclases, no te preocupes, aquí te explicamos el funcionamiento y dejamos varios usos que nos pueden ser muy útiles a…

Crear PDF con Javascript y jsPDF

El formato PDF es muy útil para descargar datos de forma masiva en una aplicación web. Ayuda a los usuarios a descargar contenido dinámico en forma de archivo para que…

Cómo centrar un Div con CSS - 10 formas diferentes

Para los desarrolladores web, a veces centrar un div parece uno de los trabajos más difíciles del mundo. Pues ya no. En este artículo, aprenderás 10 formas diferentes de centrar un…

Como hacer tu propio cursor personalizado para tu web

Cuando empecé a ojear webs distintas y originales para aprender de ellas, de las primeras cosas que me llamaron la atención fue que algunas de ellas tenían sus propios cursores,…

Explorando la API CSS Paint: Redondeo de formas parte 2

Vamos con la segunda parte de nuestro artícul sobre como manejar la API Paint para redondar bordes complejos   Control de los radios   En todos los ejemplos que hemos visto, siempre consideramos un…

Explorando la API de CSS Paint: Redondeo de formas parte 1

Añadir bordes a las formas complejas es un auténtico rollo (a veces), pero redondear las esquinas de las formas complejas es un suplicio jejeje. Por suerte, la API de pintura…

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…

Clicky