Как определить изменение цветовой схемы в javascript?

Question

Я могу использовать window.matchMedia, чтобы определить, находится ли пользователь в темном режиме, но как прослушать событие смены темного режима?

Существует ли какой-либо API, подобный:

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

Answer 1

Вы можете добавить MediaQueryListListener , вызвав addListener() на MediaQueryList, возвращаемом Window.matchMedia () :

function activateDarkMode() {
  // set style to dark
}

window.matchMedia("(prefers-color-scheme: dark)").addListener(
  e => e.matches && activateDarkMode()
);

См. Эту статью с инструкциями по Используйте «prefers-color-схема» для обнаружения темного режима macOS с CSS и Javascript

Answer 2

С установщиком инициализации и слушателем 'change'.

let 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.addListener(setColorScheme);