2

Estoy haciendo una página con un switch de Dark mode. Al clicar el switch pasamos de light mode (por defecto) a dark mode, pero al clicar en un enlace de la página e ir a otra, se muestra el light mode siempre (aunque tuviésemos seleccionado dark mode).

Os muestro el código que tengo:

:root {
    --background-dark: #fff;
    --background-light: #1647C510;
}

.dark-mode {
    --background-dark: #1a1a1a;
    --background-light: #000000;
<input onclick="myFunction()" type="checkbox" id="switch" />
<label for="switch" class="switch-label" />
<script>
    function myFunction() {
        var element = document.body;
        element.classList.toggle("dark-mode");
    }
</script>

La cuestión sería que al ir navegando, si tenemos seleccionado Dark mode, se mantenga.

2
  • 1
    Una cookie que guarde la preferencia de usuario. Una variable de sesión (o algo en el localStorage que la página consulte antes de hacer render)
    – Alfabravo
    el 28 ene. 2021 a las 18:10
  • Usa localstorage, tengo lo mismo implementado, y LocalStorage es perfecto para esto
    – Excorpion
    el 28 ene. 2021 a las 18:10

2 respuestas 2

2

Como ya te dijeron @Alfabravo y @Excorpion en comentarios, es necesario almacenar el dato en algún lugar y localStorage parece una buena opción.

¿Qué se necesita?

  • Ejecutar una función cuando se cargue la página para saber qué eligió el usuario
  • Si activó el modo oscuro, marcar el checkbox y aplicar el cambio a body
  • Aprovechar para dejar de usar eventos en línea (onclick="funcion()") y asignar evento al checkbox para que en cada cambio se actualice el estilo y se guarde la opción en localStorage
<input type="checkbox" id="switch" />
<label for="switch" class="switch-label" />
<script>
// Ejecutar al cargar la página
document.addEventListener('DOMContentLoaded', () => {
    // Buscar valor en localStorage, si no existe, poner en 'off'
    let darkMode = localStorage.getItem('darkMode') || 'off';
    // Obtener el checkbox
    let checkDark = document.querySelector('#switch');
    // Marcar checkbox y aplicar estilo a body si darkMode = 'on'
    if(darkMode == 'on') {
        checkDark.checked = true;
        document.body.classList.toggle('dark-mode');
    }
    // Escuchar cambios en checkbox
    checkDark.addEventListener('change', e => {
        // Cambiar estilo a body
        document.body.classList.toggle('dark-mode');
        // Actualizar variable de acuerdo a estado del checkbox
        darkMode = (checkDark.checked) ? 'on' : 'off';
        // Guardar variable en localStorage
        localStorage.setItem('darkMode', darkMode);
    });
});
</script>
3
  • Muchísimas gracias Triby, Alfabravo y Excorpion. ¡Solucionado!
    – brodydalle
    el 28 ene. 2021 a las 18:37
  • No hay alguna opción para saber si el navegador tiene como preferencia el modo oscuro para poder hacerlo?
    – AQMR
    el 7 jul. 2021 a las 11:51
  • 1
    @AQMR, sí hay opción, revisa esta respuesta para ver cómo manejarlo.
    – Triby
    el 7 jul. 2021 a las 14:40
0
if(window.matchMedia('(prefers-color-scheme: dark)').matches === true){
    changeMode();
}

Con eso detecta de forma automática si el browser lo tienes configurado en oscuro o claro para cambiarlo. Para aquellos que lo tenemos por defecto en oscuro, y que no pegue cantazo al entrar en tu web y tengan que cambiarlo, así se hace automático.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.