Hola saludos cordiales estoy aprendiendo Javascript, tengo un script que activa el modo oscuro, llamando un CSS con su estilo por medio de un interruptor, mi consulta es: existe una posibilidad de activarlo cuando el usuario tenga activado el modo oscuro en su navegador sin que tenga que activar el interruptor, gracias aqui está el código:
var darkMode;
if (localStorage.getItem('dark-mode')) {
// if dark mode is in storage, set variable with that value
darkMode = localStorage.getItem('dark-mode');
} else {
// if dark mode is not in storage, set variable to 'light'
darkMode = 'light';
}
// set new localStorage value
localStorage.setItem('dark-mode', darkMode);
if (localStorage.getItem('dark-mode') == 'dark') {
// if the above is 'dark' then apply .dark to the body
$('body').addClass('dark');
// hide the 'dark' button
$('.dark-button').hide();
// show the 'light' button
$('.light-button').show();
}
// Toggle dark UI
$('.dark-button').on('click', function() {
$('.dark-button').hide();
// set stored value to 'dark'
localStorage.setItem('dark-mode', 'dark');
});
$('.light-button').on('click', function() {
$('.light-button').hide();
$('.dark-button').show();
$('body').removeClass('dark');
// set stored value to 'light'
localStorage.setItem('dark-mode', 'light');
});
Les agradecería mucho su ayuda como siempre
NOTA: Quiero detectar el modo oscuro por el mismo Javascript utilizando:
const ejemplo = window.matchMedia('(prefers-color-scheme: dark)');