0

Estoy usando un UI KIT basado en Bootstrap 5, que incluye 2 versiones (Modo Oscuro y Claro) con sus respectivos CSS.

El que viene por defecto es el Claro, pero la documentación explica que se puede cambiar de tema sin necesidad de un refresh mediante Javascript.

Quiero saber cómo crear un botón que me permita hacer eso, no tengo idea de cómo hacerlo.

Código JS proporcionado por la documentación:

KTApp.setThemeMode("dark", function() {
    console.log("changed to dark mode");
}); // set dark mode

KTApp.setThemeMode("light", function() {
    console.log("changed to light mode");
}); // set light mode

Y aquí una imagen de la documentación que puede dar contexto: (No pongo los códigos pues no son reelevantes)

jeje

Gracias de antemano.

1
  • Los comentarios no deben usarse para discusiones extendidas; esta conversación ha sido trasladada a un chat.
    – Pikoh
    Commented el 9 mar. 2022 a las 16:09

1 respuesta 1

1

Solucionado, le agradezco a @masterguru por la ayuda.

El código queda así:

var tema = 'light'
document.getElementById("sip").addEventListener("click", function() {
  if (tema == 'light') {
    KTApp.setThemeMode("dark", function() {
      console.log("changed to dark mode");
    })
    tema = 'dark'
  } else {
    KTApp.setThemeMode("light", function() {
      console.log("changed to light mode");
    })
    tema = 'light'
  }
});

Con un botón:

<button type="button" id="sip">Dark mode</button>

EDIT: Si se necesita que al refrescar la página, el tema se mantenga, se ocupa este código que funciona con Localstorage:

if (localStorage.getItem("tema") === null) {
  var tema = 'light'
} else {
  var tema = localStorage.getItem("tema")
  KTApp.setThemeMode(tema, function() {
    console.log("changed to " + tema + " mode");
  })
}
document.getElementById("sip").addEventListener("click", function() {
  if (tema == 'light') {
    KTApp.setThemeMode("dark", function() {
      console.log("changed to dark mode");
    })
    tema = 'dark'
  } else {
    KTApp.setThemeMode("light", function() {
      console.log("changed to light mode");
    })
    tema = 'light'
  }
  localStorage.setItem("tema", tema)
});
1
  • 1
    Perfecto, gracias. Recuerda aceptar esta respuesta cuando te sea permitido (creo que en 12 horas se pueden aceptar las respuestas propias) para que la comunidad vea que la pregunta ya no esta pendiente.
    – masterguru
    Commented el 9 mar. 2022 a las 16:58

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