Como crear el Efecto modo Oscuro – Claro en un Sitio Web con CSS 3 y JavaScript
Tabla de contenidos
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()
|
1 2 3 |
<button type="button" class="btn btn-dark" onclick="cambiarModo()">Oscuro / Claro</button> |
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:
|
1 2 3 4 5 6 |
function cambiarModo() { var cuerpoweb = document.body; cuerpoweb.classList.toggle("oscuro"); } |
El código con la función JavaScript lo coloco antes de la etiqueta de cierre </body>
|
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript"> function cambiarModo() { var cuerpoweb = document.body; cuerpoweb.classList.toggle("oscuro"); } </script> </body> </html> |
Por último en mi hoja de estilos agrego las propiedades CSS background-color y color con los colores oscuros para el modo oscuro:
|
1 2 3 4 5 6 |
.oscuro{ background-color: #1f1f1f; color: #f1eded; } |
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
Artículos Relacionados
-
Como insertar en tu Web una parte de código alojado en Github
-
Como crear una Página Web con React 16.9 y Bootstrap 4 – Parte 1
-
5 situaciones en donde podemos usar los métodos JSON.stringify y JSON.parse en JavaScript
-
Desplegando CK Editor 5 en un Proyecto
-
Como Crear un COVID-19 Dashboard con información Actualizada de Casos Diarios con Node JS 13.13 y Bootstrap 4 – Parte 1
-
Como Leer un archivo JSON en Android (Android Studio 3.6.1 + Java) – Parte 1
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
Claro, dime cual es tu duda y en que parte te has quedado ?
Nota: Acabo de actualizar, la parte del código JavaScript, hago mención que se debe colocar antes de la etiqueta de cierre < / body >
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.
Hay muchas formas de solucionar tu problema, se me ocurre que puedes guardar un dato con el nombre oscuroactivado y su valor 1 en localstorage del navegador y en cada página validas con JavaScript si la variable oscuroactivado se encuentra en 1 y siempre le cargas el modo oscuro.
Puedes guiarte de este ejemplo (No olvides leer los comentarios en el código):
https://blog.nubecolectiva.com/creacion-de-una-fixed-bar-para-rgpd-con-local-storage-javascript-y-bootstrap-4/
LocalStorage pertenece a la API Web Storage, puedes aprender más sobre esta API en este video (Curso HTML 5 desde 0: Web Storage – 44):
https://youtu.be/gWktaN28zJE?t=588
Me avisas como te fue.
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 »
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.
No me mencionaste que usabas subdominios, pero puedes intentar establecer en cookie en el dominio principal:
document.cookie = “key=value;domain=.midominio.com”
Y luego toma los datos de cualquier dominio principal o subdominio y configúralo en localStorage
Si se te hace complicado usa Base de datos no hay problema.
Me avisas como te fue.
puedes hacer un tutorial de como crearlo con local storage y todo lo demas listo ?
Sería buena idea, pero si necesitas un ejemplo ahora mismo, puedes guiarte de este tutorial:
https://blog.nubecolectiva.com/creacion-de-una-fixed-bar-para-rgpd-con-local-storage-javascript-y-bootstrap-4/
Me avisas como te fue.
Ya tenemos el tutorial “Como crear el Efecto modo Oscuro – Claro en un Sitio Web (Mantener el modo seleccionado en las demás Páginas)”:
https://blog.nubecolectiva.com/como-crear-el-efecto-modo-oscuro-claro-en-un-sitio-web-mantener-el-modo-seleccionado-en-las-demas-paginas/
Espero te sirva a ti y a otros desarrolladores.
Ya tenemos el tutorial “Como crear el Efecto modo Oscuro – Claro en un Sitio Web (Mantener el modo seleccionado en las demás Páginas)”:
https://blog.nubecolectiva.com/como-crear-el-efecto-modo-oscuro-claro-en-un-sitio-web-mantener-el-modo-seleccionado-en-las-demas-paginas/
Espero te sirva a ti y a otros desarrolladores.
cósmico superman gracias por el aporte
Gracias, síguenos en las redes sociales para que no te pierdas los próximos contenidos.
Me gustaría saber si se puede hacer esto sin onclic, o sin js, porque estoy jugando con paguina web estática AMP, de esas que no soportan el javascript jajaja
Hola Cristian, si se puede, mira este ejemplo:
https://codepen.io/demilad/pen/bZRjpb
Gracias, parece que es más fácil que con js
Eso parece, se me ocurre que podrias crear una versión oscura y una clara, en diferentes archivos, es decir claro.html y dark.html hasta que AMP permita javascript.
buenas, podrías crearme el java script para solo copiar y pegar y ponerlo en mi blogger, te agradecería
Nunca he usado Blogger, pero parece que si te permite usar JavaScript y HTML, si es así sigue estos pasos: https://translate.google.com/translate?hl=&sl=en&tl=es&u=https%3A%2F%2Fhelp.qualaroo.com%2Fhc%2Fen-us%2Farticles%2F201696523-Installing-the-JavaScript-on-Blogger
Luego coloca el código JavaScript en etiquetas script como dice el tutorial que te pase y el código HTML del botón fuera de las etiquetas script.