1

tengo este código JS que activa/desactiva el modo Oscuro mediante un toggle HTML.

Dicho código funciona con claro.css y dark.css y agrega la clase dark-mode al body.

Necesito que si el usuario elige el tema oscuro, se mantenga aunque refresque la página. Sé que es con Localstorage pero desconozco como implementarlo.

KTUtil.onDOMContentLoaded(function() {
           var darkModeToggle = document.querySelector('#theme_mode_dark');
           var lightModeToggle = document.querySelector('#theme_mode_light');
           darkModeToggle.addEventListener('click', function() {
             KTApp.setThemeMode("dark", function() {
               darkModeToggle.classList.add('d-none');
               lightModeToggle.classList.remove('d-none');
             });
           });
           lightModeToggle.addEventListener('click', function() {
             KTApp.setThemeMode("light", function() {
               darkModeToggle.classList.remove('d-none');
               lightModeToggle.classList.add('d-none');
             });
           });
         });

La segunda cuestión es:

¿Cómo detectar el tema del sistema operativo del usuario y aplicarlo automáticamente?

Necesito una opción que no sea usar CSS @media (prefers-color-scheme: dark) porque cómo dije, son 2 archivos css separados. Encontré esta respuesta en stackoverflow, y me funciona bien, pero no sé si es la forma correcta de hacerlo y si afecta los tiempos de carga?

Espero puedan ayudarme, gracias de antemano.

6
  • ¿La primera cuestión no es lo que ya hicimos aquí con el localStorage? -> es.stackoverflow.com/questions/519019/…
    – masterguru
    Commented el 15 mar. 2022 a las 12:12
  • @masterguru si! Lo que pasa es que este código también cambia los iconos del toggle al tocarlos (y la animación) y no supe cómo adaptarle el localstorage del otro código al nuevo :( (antes de hacer la pregunta en stackoverflow habia hecho ya la pregunta en el foro de soporte del desarrollador) Commented el 15 mar. 2022 a las 12:21
  • Revisa esta respuesta para saber cómo almacenar el estilo seleccionado en localStorage y esta otra para detectar si en el navegador se seleccionó el modo oscuro.
    – Triby
    Commented el 15 mar. 2022 a las 14:45
  • @Triby Gracias, el asunto de detectar el tema del OS funciona, sin embargo al tocar el botón para volver al tema light, este no funciona. (Aclaro que están en <script> separados. Este es el Jsfiddle de mi adaptación del detectado del tema del OS. Al que de plano no supe hacerlo funcionar es al asunto del Localstorage. Commented el 15 mar. 2022 a las 15:32
  • 1
    Recarga la página y recomprueba mi respuesta, habia puesto mal el localStorage.setItem.
    – masterguru
    Commented el 15 mar. 2022 a las 16:09

1 respuesta 1

2

Esta pregunta viene a ser un calco de la anterior, con unas pequeñas modificaciones.

Creo que la respuesta que estás buscando vendria a ser esta:

KTUtil.onDOMContentLoaded(function() {
  var darkModeToggle = document.querySelector('#theme_mode_dark');
  var lightModeToggle = document.querySelector('#theme_mode_light');

  if (localStorage.getItem("tema") !== null) {
    tema = localStorage.getItem("tema")
    if (tema == "light") {
      KTApp.setThemeMode("light", function() {
        darkModeToggle.classList.remove('d-none');
        lightModeToggle.classList.add('d-none');
      });
    } else {
      KTApp.setThemeMode("dark", function() {
        darkModeToggle.classList.add('d-none');
        lightModeToggle.classList.remove('d-none');
      });
    }
  }

  darkModeToggle.addEventListener('click', function() {
    KTApp.setThemeMode("dark", function() {
      darkModeToggle.classList.add('d-none');
      lightModeToggle.classList.remove('d-none');
    });
    tema = 'dark'
    localStorage.setItem("tema", tema)
  });
  lightModeToggle.addEventListener('click', function() {
    KTApp.setThemeMode("light", function() {
      darkModeToggle.classList.remove('d-none');
      lightModeToggle.classList.add('d-none');
    });
    tema = 'light'
    localStorage.setItem("tema", tema)
  });

});

Modificaciones:

  1. Por un lado se ha agregado este trozo de código que determina si ya habia algo guardado en el localStorage previamente, y en ese caso, si es el tema light entonces le aplica lo mismo que haces al pulsar el botón toggle que ya tenias, y lo mismo pero para el dark en el else del mismo condicional:
  if (localStorage.getItem("tema") !== null) {
    tema = localStorage.getItem("tema")
    if (tema == "light") {
      KTApp.setThemeMode("light", function() {
        darkModeToggle.classList.remove('d-none');
        lightModeToggle.classList.add('d-none');
      });
    } else {
      KTApp.setThemeMode("dark", function() {
        darkModeToggle.classList.add('d-none');
        lightModeToggle.classList.remove('d-none');
      });
    }
  }
  1. Lo demás viene a ser lo mismo que en la anterior respuesta, es decir, detectamos el tema que está siendo activado mediante el click asignándolo a la variable tema y al final de cada función click lo guardamos en el localStorage mediante la instrucción:
localStorage.setItem("tema", tema)
2
  • Muchas gracias! Funciona a la perfección amigo Commented el 15 mar. 2022 a las 16:20
  • 1
    Perfecto, me alegro. Hoy he tenido que hacer algo similar en una web que estoy desarrollando y la verdad es que ya lo tenia por la mano :-)
    – masterguru
    Commented el 15 mar. 2022 a las 16:28

Tu Respuesta

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

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