Como crear el Efecto modo Oscuro – Claro en un Sitio Web con CSS 3 y JavaScript

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

Demo Github

En muchos sitios webs algunos usuarios han visto el efecto modo Oscuro – Claro, en donde un usuario presiona un botón para cambiar el fondo de color y el color de la fuente del Sitio Web, crear este efecto es posible con CSS 3 y JavaScript, en este Post te enseñaré como hacerlo de manera sencilla.

Antes de continuar con este Post 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 continuemos con el Post: Como crear el Efecto modo Oscuro – Claro con CSS 3 JavaScript.

Una de las ventajas para algunos usuarios es que al tener el modo oscuro activado pueden hacer una mejor lectura del texto y el contenido de un Sitio Web, el fondo oscuro hace descansar la vista de los usuarios, algo similar al código que los Desarrolladores escriben y leen en un editor de código en modo oscuro.

Hacer ese efecto no es tan complicado como muchos creen, pero si tiene muchos elementos puede que se complique un poco, pero para todo hay solución.

Lo primero que haré es agregar un botón, que al hacerle clic llamará a la función JavaScript cambiarModo()

Ahora el codigo JavaScript, creo una variable llamada cuerpoweb y dentro de ella llamo a todo el body o cuerpo del sitio web. Asimismo a la variable cuerpoweb le paso la propiedad classList y el método toggle() para llamar a la clase CSS que contiene las propiedades que cambian el color de fondo y el color del texto del Sitio Web:

El código con la función JavaScript lo coloco antes de la etiqueta de cierre </body>

Por último en mi hoja de estilos agrego las propiedades CSS background-color y color con los colores oscuros para el modo oscuro:

En la página web debe aparecer un botón que al presionarlo, cambia de modo Claro a Oscuro y viceversa

Al inicio de este Post hay una Demo en donde puedes ver el efecto Modo Oscuro – Claro en acción.

Si deseas hacer que el modo seleccionado (Oscuro o Claro) se mantenga siempre en las demás páginas de un sitio web, te recomiendo leer el tutorial “Como crear el Efecto modo Oscuro – Claro en un Sitio Web (Mantener el modo seleccionado en las demás Páginas)”:

Conclusión

Con JavaScript y CSS podemos crear increíbles cosas y en este Post puedes ver que con tan solo unas cuantas líneas de código le hemos añadido dinamismo a un Sitio Web. 

Nota(s)

  • Algunos de los métodos y pasos mencionados en este Post, puede ser modificados, continuar o ser eliminados, esto no depende de mi si no de los Desarrolladores que dan soporte a JavaScript y CSS.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

 

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

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
13 Comments
antiguos
nuevos más votado
Inline Feedbacks
View all comments
Camilo
Camilo
3 meses atrás

Hola. Quiero agregar esta función a mi blog de blogger pero no sé muy bien cómo poner el Javascritp. Me podrías orientar? Gracias.
gatocapitalista2.blogspot.com

Alejandro
Alejandro
3 meses atrás

Tengo una duda. Como hago que el modo nocturno seleccionado en una sección se manifiste en todas las secciones. Es dicir. Supongamos que el usuario activa el modo oscuro en la sección principal, y después entra a la sección tutoriales o lo que sea. Como hago que el modo oscuro se manisfieste también.

Alejandro
Alejandro
Reply to  Nube Colectiva
3 meses atrás

Hola!! Lo intenté, pero no pude. El localStorage de un dominio puede ser escrito y leido desde el mismo dominio, pero no desde otro, ni siquiera desde un sub_dominio. Basicamente lo único que pude lograr es que cuando el usuario entre una y otra vez al mismo dominio, su eleccion permaneza. Es decir, si en inicio activo el modo oscuro, cuando le de a reiniciar la página de incio permanecera con el modo_oscuro. Pero si entra a otra seccion/sub_dominio no va estar activado el modo escuro. Esto porque cada dominio / seccion / pagina tiene su propia memoria localStorage. Eso… Leer más »

Alejandro
Alejandro
Reply to  Alejandro
3 meses atrás

Osea lo que no pude hacer es validar con JavaScript si el dato oscuroactivado tenia un valor 1 en cada pagina. Porque cada pagina tenia su propio DATO con su respectivo Valor. Creo que la solucion seria poder compartir el mismo localStorage con varias paginas, las que seria afectadas por el modo oscuro.

david limonche
david limonche
Reply to  Nube Colectiva
3 meses atrás

puedes hacer un tutorial de como crearlo con local storage y todo lo demas listo ?

david limonche
david limonche
3 meses atrás

cósmico superman gracias por el aporte