0

este es el código funcional de JavaScript que tengo para que, mediante un botón, al hacer clic, el contneido cambie del "light mode" al "dark mode" y viceversa.

const theme_btn = document.querySelector('#btn-toggle');
//const body = document.querySelector("body");
//theme_btn.addEventListener('click', () => {
//body.classList.toggle('dark-mode')
//});

Sin embargo, he tratado de adaptarlo mediante localStorage para que al dar refresh en la página se guarde el modo oscuro, ¿Cómo puedo modificar este código? ¿Qué está mal?

function toggle() {
    theme_btn.addEventListener('click', () => {
        var dark = body.classList.toggle('dark-mode');
        localStorage.setItem("dark-mode", dark);
    });
}

document.addEventListener("DOMContentLoaded", function () {
    if (localStorage.getItem("dark-mode")) {
        toggle();
    }
});

Gracias por leer.

1 respuesta 1

1

La funcion toggle no debería agregar un event listener, directamente tendría que cambiar a modo oscuro

function toggle() {
    var dark = body.classList.toggle('dark-mode');
    localStorage.setItem("dark-mode", dark);
}

theme_btn.addEventListener('click', () => {
     toggle()
});

document.addEventListener("DOMContentLoaded", function () {
    if (localStorage.getItem("dark-mode")) {
        toggle();
    }
});

EDIT:

function toggle() {
    var dark = body.classList.toggle('dark-mode');
    localStorage.setItem("dark-mode", !dark);
}
6
  • Oh, fallo mío. Gracias por la ayuda, sin embargo, ahora se me presenta otro problema. El código funciona y cada que recargo la página me agrega el tema oscuro, pero, ¿Y si la persona que está navegando prefiere no usarlo? Al recargar la página estaría obligado a usar el oscuro.
    – user211209
    el 9 feb. 2021 a las 5:25
  • Por si no fui claro. Al abrir una pestaña nueva, el tema por defecto es el normal, al tocar el botón y recargar, se pone el oscuro. Hasta ahí todo perfecto. ¿Pero cómo hago si la persona prefiere no usar el modo oscuro y usar el que viene por defecto? ¿Cómo puedo revertirlo?
    – user211209
    el 9 feb. 2021 a las 5:29
  • Intenta abrir tu app en una pestaña en incognito o otro navegador y decime cual es el color por defecto
    – Franco
    el 9 feb. 2021 a las 5:40
  • Por defecto es blanco. Te paso la página web así lo compruebas, miras si quieres la clase y los estilos, junto con el código de js. Es funcional solo que si vuelvo a dar en el botón, me regresa al blanco, pero al refrescar me pone el negro. priva.naivemedia.repl.co
    – user211209
    el 9 feb. 2021 a las 22:08
  • Creo que tu problema esta en el css, la clase darkmode en realidad lo esta poniendo en whitemode y otra observación es que en las clases de tu body el dark-mode esta por default te recomiendo fuertemente que arregles tu css por que en el futuro te vas a confundir mucho si quieres cambiar algo. mas allá de esto edite la respuesta con una posible solución sin tener que modificar el body ni el css
    – Franco
    el 10 feb. 2021 a las 2:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.