Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Como crear el Efecto modo Oscuro – Claro en un Sitio Web (Mantener el modo seleccionado en las demás Páginas)

Demo Github

En otro tutorial llamado Como crear el Efecto modo Oscuro – Claro en un Sitio Web con CSS 3 y JavaScript creamos sin problemas el efecto en donde un usuario puede activar el modo oscuro o claro en un sitio web, pero cuando se tratan de varias páginas, las cosas cambian un poco, por ejemplo si un usuario activo el modo oscuro en la página principal de un sitio web y luego se va a la página contacto, el modo oscuro se pierde, esto es porque no se esta guardando la configuración del modo oscuro o claro según sea la opción activada, en este Post te enseñaré a como mantener esa configuración en todas las páginas de tu sitio web.

Antes de continuar te invito a leer los siguiente artículos:

Asimismo te invito a escuchar el Podcast: “¿ Que Hago Si No Tengo Los Recursos Para Dedicarme A La Programación ?”:

Spotify: Sound Cloud:

Te invito a tomar el curso CSS 3 desde 0 completamente Gratis, en donde aprenderás en detalle a usar las propiedades, módulos, etc. de CSS 3 que te permitirán darle un mejor diseño y diferentes características visuales a una Página HTML 5:

Bien ahora continuemos con el Post: Como crear el Efecto modo Oscuro – Claro en un Sitio Web (Mantener el modo seleccionado en las demás Páginas). 

Estilos CSS

Para esta funcionalidad usare 2 clases una llamada oscuro y otra claro, cada clase sera usada cuando el usuario presione el botón.


Si el usuario cambia a modo oscuro, le pintamos el fondo de la página de color negro y el texto de color blanco, caso contrario si el usuario cambia a modo claro, le pintamos el fondo de la página de color blanco y el texto de color negro.

Vista HTML

En la vista agrego un botón con el texto Claro / Oscuro, que al ser presionado llama a la función cambiarModo() de JavaScript que crearemos más adelante.


En el código anterior, puedes ver que también he agregado un botón que es opcional, es decir si tu deseas lo puedes agregar, yo lo agregaré para este tutorial, este botón resetea la configuración realizada.

Debajo de los botones voy a colocar una menú de navegación del sitio web, cuando el usuario navega por estos enlaces podremos apreciar que el modo que ha sido configurado se mantiene (oscuro o claro).


Ahora debajo del menú de navegación voy agregar el contenido de la página correspondiente, por ejemplo para la página Home del sitio este sería su contenido.


Entonces si voy al navegador y actualizo la página, debería de ver la página Home con los botones y el menú de navegación sin problemas.

Para las demás páginas el contenido es casi similar, solo cambia algunas cosas y las puedes ver en la Demo que he colocado al inicio de este tutorial.

JavaScript

Para mantener el estado o el modo seleccionado (claro o oscuro) de la página voy a usar localStorage para guardar la configuración en el navegador, primero comenzaré seleccionando el body de la página al cual se le aplicará el efecto claro o oscuro, ese lo selecciono dentro de la variable cuerpoweb y luego creo otra variable llamada modocolor en donde obtengo el valor actual del key ‘modo’ que es almacenado en localStorage cada vez que presiono el botón para aplicar el efecto claro o oscuro.


En el elemento body del sitio web haré uso del evento onload para cargar la función cargarModo(); cada vez que la página es recargada.


Y en la función cargarModo() mediante sentencias ifelse verifico si el modo es oscuro, si es así aplicamos la clase CSS oscuro, caso contrario aplicamos la clase CSS claro.


En la visa HTML coloqué un botón para cambiar el modo a claro o oscuro, al hacer clic en el botón llamamos a la función cambiarModo() la cual la crearé a continuación.

Ates de la función cambiarModo() he creado una variable llamada btnpresionado con el valor inicial false, con esta variable y las que están dentro de las sentencias ifelse, le doy la funcionalidad de hacer clic en el mismo botón para poder cambiar al modo oscuro o claro.

Con la sentencia if  verifico si el botón no esta presionado (false), si es así le quitamos el modo oscuro y cargamos el modo claro y mantenemos el botón o la variable btnpresionado en false, caso contrario si el botón es presionado, dentro de la sentencia else con otra sentencia if verifico si el modo es oscuro, si es así llamo a la función resetear() que creare más abajo, esta función elimina el key y el value almacenado en localStorage, caso contrario eliminamos el modo claro y definimos el modo oscuro, el valor de la variable btnpresionado lo pasamos a true.


Es cuestión que lo analices con calma el código anterior, parece complejo entenderlo, pero es normal, conforme lo pongas en práctica, lo dominarás y entenderás mejor. Por último creo una función llamada resetear() que limpia el modo almacenado en localStorage.


A continuación el código completo JavaScript.


Bien eso es todo, al inicio de este tutorial, he colocado una Demo para que veas el proyecto en acción, asimismo he colocado un enlace a un repositorio GitHub en donde se encuentra el código del proyecto.

Conclusión

En este tutorial hemos aprendido a crear la funcionalidad de modo oscuro / claro con HTML, CSS y JavaScript. Tu puedes añadirle otros detalles a tu aplicación, eso es a criterio tuyo.

Nota (s)

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Salir de la versión móvil