He agregado un botón en mi sitio que permite a los usuarios cambiar al modo oscuro o claro cuando lo deseen. Agregué el botón con el ícono de la luna, pero el problema es que quiero que el ícono de la luna cambie al ícono del sol cuando el usuario está en modo oscuro. Y cambia al ícono de la luna cuando el usuario está en modo de luz.
function myfunction(e) { console.log("you clicked"); document.documentElement.classList.toggle("dark-mode"); document.querySelectorAll(".inverted").forEach((result) => { result.classList.toggle("invert"); }); } const btn = document.querySelector('.btn') btn.addEventListener('click', myfunction); .dark-mode { filter: invert(1) hue-rotate(180deg); } .invert { filter: invert(1) hue-rotate(180deg); } <button class="btn"><img src='moon.png'></img></button>La clase .invertida en js se debe a que no quiero que las imágenes inviertan sus colores... así que le di a todas las imágenes una clase = 'invertida'
Entonces, esto es lo que hice y que alguien me diga cómo debo cambiar el ícono a luna y sol según el modo actual (claro u oscuro)
¡Gracias!
Puede agregar el sol como otra imagen al botón y cambiar la visibilidad de las dos imágenes a través de su clase css .dark-mode .
Entonces, cada vez que la clase .dark-mode está presente, la luna se oculta y el sol se muestra.
function myfunction(e) { console.log("you clicked"); document.documentElement.classList.toggle("dark-mode"); document.querySelectorAll(".inverted").forEach((result) => { result.classList.toggle("invert"); }); } const btn = document.querySelector('.btn') btn.addEventListener('click', myfunction); .dark-mode { filter: invert(1) hue-rotate(180deg); } .invert { filter: invert(1) hue-rotate(180deg); } /* button handling */ .moon { display: block; } .sun { display: none; } .dark-mode .moon { display: none; } .dark-mode .sun { display: block; } <button class="btn"> <img class="moon" src="moon.png" alt="moon"></img> <img class="sun" src="sun.png" alt="sun"></img> </button>Podría optar por el enfoque CSS como en la respuesta de @ Fabian. Si desea usar JS, simplemente puede usar una bandera para indicar si el usuario cambió o no al modo oscuro y establecer dinámicamente el icono en función de ello.
let isDarkMode = document.documentElement.classList.contains("dark-mode"); function myfunction(e) { document.documentElement.classList.toggle("dark-mode"); document.querySelectorAll(".inverted").forEach((result) => { result.classList.toggle("invert"); }); e.currentTarget.querySelector("img").src = isDarkMode ? "sun.png" : "moon.png"; } function myfunction(e) { const doc = document.documentElement doc.classList.toggle("dark-mode"); document.querySelectorAll(".inverted").forEach((result) => { result.classList.toggle("invert"); }); const img = e.currentTarget.querySelector('img') const label = e.currentTarget.querySelector('span') if (doc.classList.contains('dark-mode')) { img.src = 'sun.png' label.innerHTML = 'Light mode' } else { img.src = 'moon.png' label.innerHTML = 'Dark mode' } } const btn = document.querySelector('.btn') btn.addEventListener('click', myfunction); .dark-mode { filter: invert(1) hue-rotate(180deg); } .invert { filter: invert(1) hue-rotate(180deg); } ' <button class="btn"> <img src='moon.png' alt="" /> <span>Dark mode</span> </button>