Puedo usar window.matchMedia para detectar si el usuario está en modo oscuro, pero ¿cómo escuchar el evento de cambio de modo oscuro?
¿Hay alguna API como:
window.addEventListener('perfers-color-scheme-change', () => { // do something })Puede agregar un MediaQueryListListener llamando a addListener() en el MediaQueryList devuelto por Window.matchMedia() :
function activateDarkMode() { // set style to dark } window.matchMedia("(prefers-color-scheme: dark)").addListener( e => e.matches && activateDarkMode() // listener );Consulte este artículo de procedimientos sobre el uso de "preferencias de esquema de color" para detectar el modo oscuro de macOS con CSS y Javascript
El método anterior addListener(listener) ha quedado en desuso, pero aún funciona como un alias para el addEventListener("change", listener)) más nuevo. (¡Gracias a lukaszpolowczyk por señalar!)
Con setter de inicialización y escucha de 'cambio'.
const colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: dark)'); const setColorScheme = e => { if (e.matches) { // Dark console.log('Dark mode') } else { // Light console.log('Light mode') } } setColorScheme(colorSchemeQueryList); colorSchemeQueryList.addEventListener('change', setColorScheme);