Matching Media Queries

You can call +window.matchMedia+ to evaluate a media query to see if it matches. You can also add a listener for the change event to detect when the media query match status changes.

Code

const query = window.matchMedia('(prefers-color-scheme: dark)');
query.addEventListener('change', () => {
  if (query.matches) {
    // switch to dark mode
  } else {
    // switch to light mode
  }
});