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

CSS JavaScript Tutoriales | | Comunidad: Crear un Post, Eventos Devs, Foro

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.