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.