[Actualización] Modo Nocturno con LocalStorage (Javascript) 

Excelente el tutorial!!! Me encanto, te agradezco un monton por hacer este video

@@dreikam Me alegra escuchar eso!

Hola Master, primero expresarte mi admiración tienes un tempo muy bueno para enseñar, te comento que estoy desarrollando una serie de videos de desarrollo de sitios web con django 3.0 y me gustaría utilizar uno de tus proyectos frontend. Mi interés es enfocado al backend, obviamente pondria enlaces a tu video del cual usaríamos los archivos si es que nos das el permiso. Saludos y espero tu respuesta.

@@poliovei Hola George, claro que si, puedes usar mi proyecto y aprecio mucho el enlace a mi video. Suerte y ya me comentaras que tal te va con tu serie :D

@@FalconMasters Genial, muchas gracias.

Muchas gracias! :D

Muito obrigado pelo seu feedback positivo! Fico muito feliz em saber que você admira meu trabalho e que as informações que compartilho são úteis para você. Boa sorte com seu projeto!

Muchas gracias Jose, no se de Vue, pero de React si y pronto haré un curso y videos.

Jose, react y angular son muy buenos también

Si se puede pero asi como teniamos una clase dark para poner el modo dark en el body, tambien necesitariamos una light para el modo light. Y en javascript hacer la comprobación de que modo hay guardado en localstorage. Si no hay ninguno agregamos la clase light y cargarían los colores light.

Hola Augusto Castillo, prueba creando otra constante con el id del div que quieres cabiar por ejemplo: const menuinicio = document.querySelector('#menuinicio'); btnswhitch.addEventListener('click', () => { menuinicio.classList.toggle('dark'); }); Espero que te haya servido :D

.

yo lo hice agregando esta linea localStorage.setItem('dark-mode', 'true'); al inicio del js

@@eduardotaipelimaco6918 a mi no me sirvió XD, me quedaría solo en modo negro

@@eduardotaipelimaco6918 en que parte del codigo lo implementaste

Para los que aun no saben como hacerlo, pongan el condicional para saber cuando esta en dark-mode justo debajo del , así se cambia antes de cargar el cuerpo de la página. Para que sirva no debe haber ningún transition cuando se agrega la clase dark, se vera mas feo el cambio pero servirá. Lo otro seria leer la clave del localStorage directamente desde el servidor

Muchas gracias, y lo voy a tener en cuenta para un próximo tutorial.

Gracias

Hola, pudiste solucionarlo? Tengo la misma duda

Hace 2 años y ahora me encuentro con ese problema😅 lograste solucionar ese parpadeo que se produce con la animacion de transicion?

@@conspilt5021 estoy igual, quiero que al recargar no haga la transicion !

​@@gerardoturin1999 Hola, vi que la forma para que no haga ese efecto indeseado es crear alguna cookie con el valor de la clase que le hayas puesto al modo oscuro y recibirla con algún lenguaje de backend.

Sisas crack, solo hay que meter el localStorage en el addEventListener y ponerle una variable al valor let circle=document.getElementById('circle'); let inter=document.getElementById('inter'); let body=document.getElementById('body'); let on="false"; circle.addEventListener('click',()=>{ circle.classList.toggle('active'); inter.classList.toggle('activeB'); body.classList.toggle('activeBody'); if(inter.classList.contains('activeB')){ on='true'; } localStorage.setItem('darkMode',on); }) /* if(inter.classList.contains('activeB')){ localStorage.setItem('darkMode','true'); } else{ localStorage.setItem('darkMode','false'); } */ if(localStorage.getItem('darkMode')==='true'){ circle.classList.add('active'); inter.classList.add('activeB'); body.classList.add('activeBody'); console.log(localStorage.getItem('darkMode')); } else{ circle.classList.remove('active'); inter.classList.remove('activeB'); body.classList.remove('activeBody'); console.log(localStorage.getItem('darkMode')); } Lo que está en comentario es lo que subió el Arturo en el video

MMM..... si de alguna forma pudieras mandar los archivos podríamos ayudarte

cambia los "unset" de los left y right

Si, Firefox es muy seguro. Pero no entiendo muy bien a que te refieres.

@@FalconMasters si al igual que uso la cuenta de Google en Chrome, estará segura en Firefox?

Osea, no hay peligro usar mi cuenta de Google en firefox?

@@berling32 No, por parte de firefox no hay ningún problema. El problema seria si tu entraras a sitios de tipo phishing o tuvieras algún troyando en tu pc, pero por el propio firefox no deberias preocuparte. Es muy seguro.

@@FalconMasters Uff, que bien. Muchas gracias !! Saludos

Hola Rosyel, lo que pasa es que la computadora la tengo en el piso un poco alejada del micrófono.

@@FalconMasters lo alejé pero igual sigue sonando, no sé si es el ventilador o los ruido de la electricidad ya que no tiene cable pozo tierra. Aparte que micrófono me recomiendas para que mi voz salga limpio asi como el tuyo. Pleasee!!!

@@rosyelmar Yo tengo un blue yeti, pero es muy sensible al audio, es posible que llegue a captar también el ruido de la computadora.

Tienes que agregar esta función a tu theme de wordpress modificando el código. No estoy seguro de si haya algún plugin para hacerlo.

necesitas un servidor

Con php lo puedes hacer

Hola, localstorage funciona por dominio, es decir que te debe funcionar en todas las partes de tu pagina web.

También se puede, tendrías que tener el script en tus demás archivos, pero a ese punto ya mejor te recomendaría utilizar algún framework o librería de React que te permita trabajar mas fácilmente con varias paginas.

@@FalconMasters si puse el script en mis demas paginas y tambien la link del css Pero aun asi no funciona como quiero :"v

body.dark p Sorry por tardar 5 meses en responder

@@SusoitoGamer gracias no te preocupes

Creo que no es lo que estas pensando.

@@FalconMasters ¿Entonces porque Masters?