0

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)');

1 respuesta 1

0

Deberías analizar la propiedad .matches de matchMedia():

// Devolverá verdadero o falso
let darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

// ¿Activar estilo de modo oscuro?
if(darkMode) {
    $('body').addClass('dark');
} else {
    /*
     * Si el usuario no seleccionó modo oscuro en el navegador
     * aquí podrías incluir los botones y la lógica para manejarlo por localStorage
     */
}

No estoy seguro que funcione porque no lo he probado, pero podrías intentar "escuchar" cambios en preferencias del usuario con .addListener():

// Crear matchMedia
let eventDark = window.matchMedia('(prefers-color-scheme: dark)');
// Función para aplicar cambios
const isDark = (e) => {
    if(e.matches) {
        // Agregar clase
        $('body').addClass('dark');
    } else {
        // Quitar clase
        $('body').removeClass('dark');
    }
};
// Escuchar cambios en matchMedia
eventDark.addListener(isDark);

Es probable que debas adaptar ambos códigos, uno para detectar la configuración inicial y, este último, para cuando haya cambios como el que mencionaste en tu comentario.

2
  • Gracias es una manera mucho más intuitiva, el único problema en si, por ejemplo: si esta activado el modo oscuro en el navegador, y el usuario o el sistema operativo cambia de modo por uso horario que tenga configurado el usuario, si la pagina sigue abierta no se actualizan los colores hay que refrezcar la página
    – Mayor Ron
    Commented el 26 mar. 2021 a las 0:38
  • No habías especificado esa posibilidad en la pregunta, pero ya está actualizada la respuesta.
    – Triby
    Commented el 26 mar. 2021 a las 14:31

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.