Add Dark Mode Your Site Easily with CSS and Javascript.

[@FalconMasters]

📌 [Actualización] Agregando soporte para LocalStorage: kzbin.info/www/bejne/iYSTmZR9iKhprKs 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ó :)

[@oscardiaz9170]

Perfecto! en mi caso la verdad es que me gustaría que muchos videos de KZbin no duraran tanto, a veces no tenemos el tiempo que quisiéramos, así que creo esta idea es excelente. Saludos

[@FalconMasters]

@@oscardiaz9170 Gracias por tu comentario :D

[@mauricioorellana1924]

Ha quedado perfecto!.

[@carlosalexandercr1487]

Se ve muy bien, y la explicación se entiende. Muy buen trabajo

[@FalconMasters]

@@carlosalexandercr1487 Gracias

[@danielazzi7649]

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 :)

[@Zelevf]

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.

[@FalconMasters]

Muchas gracias por el apoyo a mis videos, me da mucho gusto escuchar que te sean de mucha ayuda. Saludos!

[@maximilianoestigarribia9164]

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.

[@joseluis912]

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.

[@marcosmino3917]

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..

[@FalconMasters]

Gracias!

[@davidm.8835]

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.

[@IngrownMink4]

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

[@r4nd0m-k2z]

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

[@FalconMasters]

Muchas gracias!

[@federicocampi1008]

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

[@ricardogoro]

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!

[@lalocanario243]

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

[@tacodelmetro8385]

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

[@FalconMasters]

Muchas gracias!

[@Juansecu]

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.

[@FalconMasters]

Muchas gracias, me alegra que el video te sirva. Y si SASS es genial!

[@dibujartefacil5789]

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

[@brisiamorales7346]

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

[@FalconMasters]

Gracias!

[@arturorosas2170]

Gracias, lo que necesitaba está en 17:14

[@nanoyt2]

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

[@FalconMasters]

Muchas gracias!

[@Diablerick]

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

[@jerermyreynoso7946]

me encantaaaaa, nunca dejes de hacer estos tutoriales tan bellos

[@eliyya7374]

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

[@FalconMasters]

Gracias

[@chibaleet]

Opera GX jaja, entendi esa referencia

[@DiegoGutierrez-gu5ui]

Me has quitado un dolor de cabeza, grande Falcon

[@emiliaramirez7867]

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

[@luiselias8127]

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

[@FalconMasters]

Muchas gracias Luis!

[@fernandogonzalez8795]

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

[@danimart69]

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

[@jhonsevilla8681]

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.

[@MsSoldadoRaso]

bro, compra un curso en udemy son los mejores

[@Charlie-nw9kg]

En CSS ahora tambien se pueden usar variables ... Por ejemplo, determinas tu variable así :root { --color-rojo: #f81f01; } y la llamas asi: .clase { background-color: var(--color-rojo); } Hice mi función de DarkMode usando variables en CSS dentro de mi proyecto sin compiladores y sin tener que recordar valores o repetir estilos ... :P

[@van.vanuzita]

lo aclara en el video!

[@cristiancuellar6327]

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

[@anahicampos1023]

hola pudiste resolverlo? .switch{ background: #111111; border-radius: 1000px; border: none; position: relative; cursor: pointer; display: flex; outline: none; } .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: rgb(216, 190, 142); color: #000; } .switch:active::after{ right: 0; left: unset; } span{ width: 30px; height: 30px; line-height: 30px; display: block; background: none; color: #fff; }

[@anahicampos1023]

se traslada pero no queda fijo y regresa nuevamente a su posicion inicial

[@henryromero7492]

Excelente tutorial, muchas gracias!!!

[@jav1978]

Excelente video Carlos muy bueno

[@nataliamateo8831]

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

[@FabioGMartinez]

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

[@leodanperez5646]

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

[@mmetroidmaniacc]

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

[@christianrizo9424]

Sencillo y funcional gracias por el video!

[@alfonsoabreu1667]

Eres un master, muchas gracias!

[@Christianlvm22]

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!

[@gogetaultra1932]

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

[@FalconMasters]

Hola Felix, si lo hice, aquí lo tienes: kzbin.info/www/bejne/iYSTmZR9iKhprKs

[@IAVIC]

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

[@GuaditaEmprende]

Venia a comentar lo mismo ja ja ja

[@vjpadron07]

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

[@ImDash]

Ya tiene uno en udemy. Yo lo aprendi pero me quede con css

[@enemyhl]

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

[@citruscorex]

te amo mi loco

[@taichi763]

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!

[@carmonarya]

Excelente Amigo me gustan mucho tus videos

[@FalconMasters]

Gracias!

[@matias5895]

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; }

[@matiaslupa6035]

Gracias man!!! No sabia como hacer esta parte, .switch.active::after, sin sass

[@dealbaeduardo5439]

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

[@FalconMasters]

Eduardo Alba Hola Eduardo el curso está actualizado sin embargo si que continuo agregando secciones nuevas

[@aldairmarcelo5432]

Buenazo, muchas gracias!

[@CRamirezBedoya]

Me podrias explicar por favor la propiedad transition que aplicaste

[@howerkin]

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 :)

[@FalconMasters]

Yo no uso BEM, pero ya hay varios que me están pidiendo que hable sobre el así que es posible que haga un video pronto del tema.

[@howerkin]

@@FalconMasters Gracias :D

[@rodrigohernanmaldonadomedi5114]

Muy bueno! te felicito!

[@Antonio-qr1sp]

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.

[@sebatecning5207]

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

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.

[@miguelhyto54]

muy útil, muy claro el video

[@FalconMasters]

Gracias

[@1337Unlucky]

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

[@FalconMasters]

Quizás D:

[@ricksanchez-mm9ei]

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

[@alfredocaio4257]

Muy interesante. Gracias.

[@emfelpeto]

Excelente canal!

[@rociogomez2075]

Excelente video y contenido!

[@FalconMasters]

Gracias!

[@eduarquintero73]

Muy buen video, buenísimo

[@eduardogil1775]

Exelente, Gracias!

[@luisarmijos9937]

Excelente trabajo!! 😀👍🏻

[@FalconMasters]

Gracias!

[@jdrlopez5704]

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

[@FalconMasters]

Muchas gracias!

[@pecorarodavid6950]

Como busco sus cursos de udemy?

[@jdrlopez5704]

@@pecorarodavid6950 podes entrar en el link que está en la descripción de el video ahí hay varios cursos que el tiene.

[@FalconMasters]

@@pecorarodavid6950 Los tienes en la descripción del video

[@andrestalero1042]

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?

[@cristianovelazquez2048]

Gracias.

[@slaveofthecode]

@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.

[@FalconMasters]

Si, se pueden usar variables con CSS, a mucha gente no le gusta usarlas aun por la compatibilidad incluyendome. Sin embargo creo que son importantes y cada vez tenemos que aceptarlas mas.

[@michelrojas1609]

Excelente

[@rupestrestudioagency]

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

[@1337Unlucky]

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

[@FalconMasters]

Tramposo

Excelente como siempre.

[@FalconMasters]

Gracias!

[@jeffersonpineda6381]

genialisimo !!!!!!

[@pilqu2403]

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.

[@FalconMasters]

Muchas gracias, lo voy a tener en cuenta!

[@JohnDoe-rk7ex]

Muy bueno. Sin embargo, CSS también tiene variables. Solo usando var(--variable) luego de ser definida.

[@agustin4642]

muy buen video amigo!

[@alangeorge1090]

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

[@julianvelez6563]

excelente falcon masters

[@j.venturarivera7043]

Videaso, gran aporte a la comunidad bro ;)

[@FalconMasters]

Gracias!

[@halvarhernandez2432]

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; }

[@miguelangelherreragomez3307]

Literal a mi 10 me aparecieron.

[@josemata9275]

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

[@FalconMasters]

En mi curso de PHP enseño como hacer un buscador básico. Quizás te pueda servir.

[@josemata9275]

@@FalconMasters Perfecto muchas gracias

[@eliabospino6475]

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.

[@Emirchus]

me gustaron las card's, estaría bueno que hagas un tutorial de cards, buen video

[@FalconMasters]

Si, a mi también me gusto ese estilo, por eso decidí aplicarlo. El efecto es muy sencillo, solamente a la card le ponemos un padding top del alto de la imagen, le ponemos un position relative. Y después a la imagen un position absolute con un top de -70px por ejemplo y listo!

[@Emirchus]

@@FalconMasters Sisi, ya hice algo similar! Te lo mando por twitter, pero me refiero a un tutorial tipo UI, estilo los tips que hay en codepen!

[@FalconMasters]

@@Emirchus Si, la verdad es que es genial ese estilo de cards. Ya vi que me lo mandaste en twitter, gracias por compartirlo!

[@Emirchus]

@@FalconMasters Gracias a vos! Espero el tutorial de cards pero más a detalle ewe

[@FalconMasters]

@@Emirchus No te prometo nada porque ya tengo otros videos programados, pero lo apunto en mi lista de videos por hacer.

[@abdiashernandez1732]

Excelente vídeo gracias 👌👌

[@daniellievano1793]

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

[@crishtianrodriguezherrera6671]

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

[@alexo2537]

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

[@wilsonadonelrodriguezcarba6612]

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

[@luiscuenta6789]

Muy buen vídeo Falcón

[@FalconMasters]

Gracias!

[@Benjamin-vv3br]

¿Que themes tienes instalados en VSC?

[@FalconMasters]

Los de Ayu

[@yangenmanuel2659]

Hola Falcon, queria preguntarte como "subir" mi pagina web de tal modo q alguien pueda entrar en ella. Como le hago? Excelente video

[@daque7253]

Hola Enmanuel , te recomiendo veas este video y las subsecuentes partes, para que te familiarices con ese proceso kzbin.info/www/bejne/qHrChJWQZ9WVhZI Saludos

[@yangenmanuel2659]

@@daque7253 crack :)

[@florenciafernandez5207]

Hola, me encanto tu video. Quisiera saber si pudieras ayudarme ya que tu lo realizas en html y yo lo estoy implementando en js, por lo cual, no me recoonoce el 'id="switch' de la etiqueta button. He visto otras formas de darle funcionalidad al boton, pero de verdad me gusto mucho el que utilizaste. Muchas gracias! ♥

[@FalconMasters]

Hola Florencia, no entiendo muy bien a que te refieres. ¿No puedes poner un id con el valor de switch al botón ?

[@florenciafernandez5207]

@@FalconMasters Muchas gracias por responder. Exactamente, yo implemente tu codigo de html en un componente .jsx, y todo funciono correctamente, menos la lectura de la carpeta main.js, por el id dentro del boton. Por lo tanto, no pasa nada cuando hago click sobre el boton, ya que no reconoce la carpeta main. Gracias!

[@FalconMasters]

@@florenciafernandez5207 No deberías tener problemas para reconocer el botón ya que estamos obteniendo el boton mediante su ID. Me indicas que estas usando jsx, es decir que estas usando React? De ser así, puedes trabajar como yo, obteniendo el ID, pero tambien agregando un event listener al boton directamente gracias a la propiedad onClick={}

[@jonathanjs2719]

Gracias broo

[@zerotet]

Me estaria gustando un curso de lavarel

[@danioerit2125]

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... Document 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.

[@antoniorandisi3009]

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

[@luiscalenivelasquez7008]

muy buen video

[@elgatodiego]

Excelente. Muchas gracias ... yo lo compilo con Koala. Saludos

[@aleh3101]

Muy bueno pero tengo una duda que no explicaste en el video, ¿Como se guardan los cambios en las cookies? porque al actualizar la pagina se restablece a la version clara y creo que no serviria de nada tener ese boton ya que al navegar volveria a cada rato a esa version y no se quedaria en la oscura.

[@FalconMasters]

Eso lo puedes arreglar muy fácil con localstorage. Ya van varias personas que me lo preguntan así que voy a grabar un video de como hacerlo. Sin embargo no creo poder subirlo hasta dentro de 2 semanas, ya que ya hay video programado para la siguiente semana.

[@aleh3101]

@@FalconMasters Esperaré ese video, gracias.

[@OscarMartinez-pe7eh]

Muy buen video me encantó 👌👍

[@antoniorandisi3009]

Saludos, muy bueno