D4mations.com

Implementa el Modo Nocturno (Dark Mode) Fácilmente con CSS y Javascript



Aprende como agregarle un modo nocturno (dark mode) a tu pagina web o aplicación fácilmente usando HTML, CSS y Javascript.

🚀 Blog de Diseño Web:
http://www.falconmasters.com

✔️ Curso Completo de Diseño Web Profesional:
https://www.udemy.com/course/diseno-web/?referralCode=BCC54890816B6A9BCFB7

✔️ Curso Completo de PHP y MYSQL:
https://www.udemy.com/course/php-y-mysql/?referralCode=65030D8167A2AC468B3A

✔️ Curso de Bootstrap 4:
https://www.udemy.com/course/curso-bootstrap/?referralCode=9295F0DABEA90E98FF64

✔️ Curso de Tiendas Online:
https://www.udemy.com/course/curso-tienda-online/?referralCode=18423E7B622E6C6C2846

—

📄 Código del Proyecto: https://github.com/falconmasters/dark-mode-con-javascript

—

Redes Sociales:

♦ Twitter @falconmasters:

♦ Pagina de Facebook:
http://www.facebook.com/falconmasters

Original source

d4mer

, , , , , , , , , , , , , , , ,

50 responses to “Implementa el Modo Nocturno (Dark Mode) Fácilmente con CSS y Javascript”

  7. Excelente video!! Me encantó el tutorial, mi unica duda es que cuando me pongo a navegar por mi pagina por ejemplo clickeando una etiqueta A para ver otro sector de la pagina y no se mantiene el modo oscuro ¿Hay alguna forma de mantenerlo?

  9. Hola, llego algo tarde, por cierto muy buen video aunque tengo una duda, lo que pasa es que al agregarlo en mi proyecto, tengo que dar 2 clicks para que pueda cambiar de "tema" claro a oscuro, aparte no se queda marcada la opcion osea, es como si al darle click una vez se cambia y se devuelve a donde empezo y asi cada vez con cada click, me podrian ayudar pls uso CSS.

  13. Que buen vídeo man. No sabes cuánto me has ayudado con esto.

    Viendo solo este vídeo, pienso que SASS me podría ayudar mucho en el futuro, así que me pondré a aprender esta tecnología tan hermosa.

  16. hola
    la pagina de fontawesome no me carga y llevo días sin poder acceder a ella ¿le pasa algo a ese sitio???. Afortunadamente baje los iconos con anterioridad y los puedo usar en mis proyectos sin conexión pero no me sé los códigos para usar los demás, donde puedo consultar esa información? agradecería una respuesta.
    Saludos desde Colombia.

  24. Este vídeo está genial! Has mejorado mucho el audio, en tus primeros vídeos el sonido era como muy metálico y agudo. Felicidades y gracias por tus aportaciones. Saludos.

  29. Hola, se que no tienen nada que ver con el vídeo pero tengo una duda. ¿hay alguna manera de hacer que con javascript un input tome un valor de ahí?
    Es decir, si por ejemplo tengo en html…
    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    </head>

    <body>


    <input type=text></input>
    </body>

    </html>
    y tengo en javascript
    var random=Math.round(Math.random()*100);

    ¿como puedo hacer que el valor random lo tome el input?

    espero no haberte incomodado, te sigo desde algún tiempo y tus vídeos sin lugar a dudas me han ayudado bastante en mi vida estudiantil.

  35. hola falcon me sale un error en js, el error sale la promer linea de const btnSwitch = document.querySelector('#switch');
    y esto el lo que sale expected an identifier and instead saw const , espero me puedas ayudar, buen video

  36. Excelente, he seguido muchos de tus vídeos y realmente he aprendido mucho. Gracias por ese aporte,hay cosas que ya manejaba pero me ha ayudado a afianzar así que no solo sirve para los iniciantes. Me gustaría que sacaras secciones del backend con Js: con mongoDB. O manejo de algún frameworks con Angular. De igual forma admiro mucho el tiempo que tomas para explicar en cada video.

  37. Hola a Carlos, primero que todo excelente vídeo, que efecto tan hermoso, segundo, quisiera que me ayudaras con lo siguiente por favor. Me aparece éste mensaje al abrir Visual Studio Coide (Failed to load jshint library. Please install jshint in your workspace folder using 'npm install jshint' or gobally using 'npm install -g jshint' and then press Retry.) Cómo puedo solucionarlo. Mil gracias.

  43. ¡Gracias por subir este vídeo! Llegué aquí por casualidad y me has ayudado a solventar un problema que tenía para implementar el tema oscuro en mi página web 😄🧡 Saludos desde España y tienes nuevo suscriptor 😊

  45. Explicas excelente, ¿Puedes hacer una página muy avanzada de html, css y javascript? Me fascina todo lo que sea muy avanzado en html. Gracias FalconMasters. Un saludo cordial.

Leave a Reply