Creé una función de modo oscuro que me permite usar el almacenamiento local para "guardar" la última preferencia seleccionada que el usuario eligió al hacer clic en un ícono, incluso si van a diferentes páginas dentro del sitio, actualizan, cierran, etc. Lo que puedo hacer No descubro cómo puedo agregar una declaración if para que el ícono también cambie su "src" a un archivo png diferente cuando el "modo oscuro" esté habilitado y luego vuelva a cambiar a otro ícono cuando esté deshabilitado. Si alguien pudiera ayudarme con esto se lo agradecería mucho.
let darkMode = localStorage.getItem('darkMode'); const darkModeToggle = document.querySelector('#dark-mode-toggle'); const enableDarkMode = () => { document.body.classList.add('darkmode'); localStorage.setItem('darkMode', 'enabled'); } const disableDarkMode = () => { document.body.classList.remove('darkmode'); localStorage.setItem('darkMode', null); } if (darkMode === 'enabled') { enableDarkMode(); } darkModeToggle.addEventListener('click', () => { darkMode = localStorage.getItem('darkMode'); if (darkMode !== 'enabled') { enableDarkMode(); } else { disableDarkMode(); } }); const scrollBtn = document.getElementById("scroll_up") scrollBtn.addEventListener("click", () => { document.documentElement.scrollTop= 0; });Simplemente modifique el atributo src , así:
const enableDarkMode = () => { document.body.classList.add('darkmode'); localStorage.setItem('darkMode', 'enabled'); darkModeToggle.src = "./images/darkToggle.svg"; // replace the path according to YOUR directory structure } const disableDarkMode = () => { document.body.classList.remove('darkmode'); localStorage.setItem('darkMode', null); darkModeToggle.src = "./images/lightToggle.svg"; // replace the path according to YOUR directory structure }