'How to detect prefers-color-scheme change in javascript?

I can use window.matchMedia to detect whether user is in dark mode, but how to listen dark mode change event?

Is there any API like:

window.addEventListener('perfers-color-scheme-change', () => {
  // do something
})
javascriptcssbrowser


Solution 1:[1]

With initialization setter and 'change' listener.

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Andrew Childs

Related Questions