Add Dark Mode Your Site Easily with CSS and Javascript. 

📌 [Actualización] Agregando soporte para LocalStorage: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-SS0haGSC6vI.html Este video intente grabarlo de una forma un poco mas ágil y rápido (para no hacer un video muy largo) pero con la misma calidad de siempre. Me harían un gran favor si ven el video y me comentan que les pareció :)

hace algunos meses empecé a aprender con algunos tutoriales de este canal que deben tener unos 5 o 6 años. se puede apreciar la profesionalidad con la que ha creciendo el canal. recomendado :)

¡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 😊

Gracias a vos es que entre al mundo del desarrollo web y me encantó aprendí de vos HTML,CSS y BOOTSTRAP gracias por tus vídeos y me alegro de haberme suscrito a tu canal genio.

Excelente aprenderlo de una vez ahora que estoy a punto de egresar, además hoy en día ya casi todo tiene modo oscuro y gracias a ti podre saber utilizarlo para que mis proyectos también lo tengan.

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.

Es genial que expliques el porqué de cada propiedad que le aplicas, muchas gracias¡🙏👏💗

me encantaaaaa, nunca dejes de hacer estos tutoriales tan bellos

The simple the best! Mejor tutorial en la web no solo en youtube. Gracias por tu contenido lml chido

Excelente vídeo, como todos los anteriores. Muchas Gracias por compartir tus conocimientos !!!!!!!

Mi enhorabuena porque explicas las cosas muy bien y paso a paso.

Excelente explicación, me salvaste de perder mas tiempo buscando como hacer esto, gracias!!

Muchas gracias!. El conocimiento que compartís no tiene precio, que gran valor al alcance de todos. Admirable.

Excelente video... eres un crack... que emocion... tu ejemplo motiva... saludos 🤓

Gracias!! Messive y me vino re bien para meterle a las practicas!!

Gracias!!! Excelente vídeo, buen aporte, sigue creciendo, me has ayudado mucho, eres un pro

Sí, eres muy bueno en la programación. Te admiro.

gracias carlos arturo, muy educativo el vídeo, saludos desde puente alto, chile.

Gracias a ti mi aprendizaje en programación ha sido un poco más fácil. Agradecido contigo, tu forma de enseñar se entiende perfectamente.

Eres un crack justo lo que buscaba, muy buen video saludos.

Excelente tutorial, muchas gracias!!!

Hola Arturo, eres muy bueno agradezco que compartas tus conocimientos, eres buenisimo, MUCHAS GRACIAS

Muchas gracias, explicas súper! Tengo una consulta, cómo se haría si por último quisiera que las imágenes se vieran un poco opacas y grises? Por el tema del brillo. Saludos!

Sencillo y funcional gracias por el video!

Me has quitado un dolor de cabeza, grande Falcon

Great video!!! Thanks a lot for the English subtitles 👍🏽

Este video hay que verlos como 3 veces para poder digerir tanta información! Creo que para meterse con Sass hay que entender supr bien el tema de css para comprender que debe hacer sass! gracias por los cursos!

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.

Eres un master, muchas gracias!

Excelente video Carlos muy bueno

Buen video, me gustó que explicaste el paso a paso de función cumplía cada código.. Y la lógica de como cuando cambian el nombre de la clase..

vaya, parece que me lees la mente tome su like buen hombre

Muy buen video. Explicas muy bien! Soy estudiante de unos de tus curso de udemy, y me gusta cómo explicas las cosas!

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.

Buenazo, muchas gracias!

Muy bueno! te felicito!

Muy interesante. Gracias.

Muy buen video, buenísimo

woah very good it helped me with my tesis! thank you Carlous!

Excelente vídeo gracias 👌👌

Con FalconMásters, llevo 5 segundos del video y doy manito arriba inmediatamente, excelente tu contenido, el mejor 👏👏👏👏👏👏👏👏👏👏👏🍻🍻🍻🍻🍻🍻🍻🇨🇱🇨🇱🇨🇱🇨🇱🇨🇱🇨🇱

Exelente, Gracias!

Excelente canal!

Videaso, gran aporte a la comunidad bro ;)

excelente falcon masters

Wooo cool no conocia el Sass, gran video nuevas cosas aprendiendo :D

muy buen video amigo!

Excelente trabajo!! 😀👍🏻

Me gustó mucho el video! Tengo entendido que ahora sí se pueden usar variables en CSS puro verdad? Estoy comenzando con esto del desarrollo...

Me parece un vídeo muy interesante, y me ha gustado muchísimo. Felicitaciones por tu vídeo. Hay que empezar por un curso de Sass

Muy bueno tu video, directo al hueso, lo implemente en en una pagina en la que estoy trabajando, y me funciona genial solo en la media menor a 700px, mas de eso no me coloca de forma dinámica la clase en el body, y por ende no me funciona, sabrías el por que de esto? nuevamente gracias.

Muy buen video me encantó 👌👍

Excelente como siempre.

Gracias.

genialisimo !!!!!!

Excelente Amigo me gustan mucho tus videos

Excelente. Muchas gracias. Una pregunta: me queda un recuadro de un color anaranjado por fuera del botón a pesar de no tener borde ni outline. ¿Cómo podría quitarlo?. Gracias!

Excelente ✌🏽

Tú de ninguna manera te mereces 338,000 suscriptores... para mí por lo menos mereces unos 338 millones, gracias por los videos!

te amo mi loco

Genial!!!!!!!!!!!!!!!!!!!!!!

Excelente video y contenido!

Saludos, muy bueno

Excelente

muy útil, muy claro el video

Hola Falcon, la verdad muy excelente tus videos, se aprende mucho, yo estoy estudiando programacion, solo que en este video tu mencionas que los explicaras solo con CSS y JS ya que yo aun no he visto "sas" espero leas mi comentario, me gustaria saber si tienes algun video o podrias hacer uno utilizando solo CSS y JS sin utilizar "sas". Muchas gracias saludos cordiales

Hola, un vídeo espectacular, muchas gracias por enseñar tanto. Tengo una pregunta, ¿en tus proyectos profesionales utilizas la sintaxis BEM para clases y el SASS? Saludos :)

Como se podria hacer para que cuando se haga click, el span haga una transicion de un lado al otro?

Gracias broo

Gracias, lo que necesitaba está en 17:14

Un video de calidad gracias por este aporte y el curso en Udemy esta excelente.

muy buen video

Amigo, una duda Se puede hacer lo mismo pero que la página cambie según el tema por defecto del navegador? Sería un buen tutorial

Ótimo vídeo.

Tengo una pregunta, como se haría para guardar la opción del modo oscuro, que sin importar que se recargue la página, siga estando en modo oscuro?

nota: css tiene variables,, por el resto un video interesante.

Muy buen vídeo Falcón

Me podrias explicar por favor la propiedad transition que aplicaste

Muy buenoo, por cierto tu voz es idéntica a la de Isa Marcial jaj

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.

Buen video causita

desde css como se hace ? al fin no mostro como quedaba y por cierto me gusto mucho el video

Hola! consulta: me funciona perfecto el código (sass y js) en el index principal, pero si en este mismo index tengo otro index enlazado, el modo oscuro no lo toma... ¿alguna posible solución? gracias!!!

Hola, FalconMasters. Primero quiero felicitarte por tan maravilloso vídeo. Tengo una duda y un problema. Seguí todos lo pasos y me funcionó casi todo satisfactoriamente. Pero el botón no se me queda del lado dark, cuando lo presiono, enseguida vuelve a la izquierda. ¿Qué será? P. D: No usé scss.

tengo un problema cuando le doy inspeccionar elemento para ver como quedo con el responsive los logos se devuelven a como estaban antes de darle estilo, ademas de que no me funciona para aplicar el modo oscuro en algunas pantallas de celular

@FalconMasters en el tiempo 20.13 aprox, hablas sobre las variables en Sass. Mi consulta es: existen manera de usar variables sin Sass? (me parece que si) De ser asi, es necesario hoy en dia usar un co-procesador como Sass? Saludos y como siempre, muy buenos tus videos.

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.

gran tuto, gracias, lastima que usas scss pero con css se hace muy fácil y mejor, se los dejo en css. .switch { background: #343D5B; border-radius: 1000px; border: none; position: relative; cursor: pointer; display: flex; outline: none; } .switch span { width: 30px; height: 30px; line-height: 30px; display: block; background: none; color: #fff; text-align: center; } .switch::after { content: ""; display: block; width: 30px; height: 30px; position: absolute; background: #f1f1f1; top: 0; left: 0; right: unset; border-radius: 100px; transition: .3s ease all; box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .2); } .switch.active { background: #fbbf13; color: #000; } .switch.active::after { right: 0; left: unset; }

Hola! :/ me gusto tu curso : ✔️ Curso Completo de Diseño Web Profesional, pero quería saber si en un futuro lo vas a actualizar .

te amo

Brother de antemano muchas gracias por el video pero el repositorio no esta el codigo del video...

Puede hacer un pequeño video aparte o un short sobre como ponerla que cuando se actualize se guarde el modo y no es reinicie

La nueva música me gusto mucho, sera que se viene un rework de "falconmasters"? PogChamp!

Hola Carlos me pareció genial el vídeo, crees que podrías hacer uno explicando cómo hacer un buscador funcional o si ya tienes uno en el canal me lo podrías recomendar Gracias

amigo puedes hacer tutorial sobre cambiar el color de titulos y btn a traves de configuracion

es el mismo método en sublime text? no me funciona el método con sass de "body.dark &" para cambiar los valores al hacer el cambio dark

Saludos Falconmasters, baje el archivo del repositorio, pero falta el contenido del archivo js. gracias

Crack

Muy buen video, muchas gracias, sabes estoy iniciando en este ambiente y aun no entiendo muchas cosas, trato de replicar lo que nos muestras en el video pero en la parte del boton para el switch coloco el after (pero en CSS) y en lugar de aparecerme un boton me aparecen dos, te paso parte del codigo: .switch { background: #343D5B; border-radius: 1000px; border: none; position: relative; cursor: pointer; display: flex; outline: none; } .switch ::after { content: ""; display: block; width: 29px; height: 29px; position: absolute; background: #f1f1f1; top: 0; left: unset; right: 0; border-radius: 100px; transition: .3s ease all; box-shadow: 0px 0px 2px 2px rgba(red, green, blue, alpha); } span { width: 30px; height: 30px; position: relative; line-height: 30px; display: block; background: none; color: #fff; }

holaa, linkeo el script en mi html pero cuando actualizo mi pagina web no me aparecen los botones , sino la class switch