Get the initial state of a media query and watch for changes with one easy function.

watchMediaQuery.js

function watchMediaQuery(media, truthy = true, falsy = false) {
  const listeners = [];
  const mediaQuery = matchMedia(`(${media}: ${truthy})`);
  mediaQuery.addListener(() => {
    for (const listener of listeners) listener();
  });
  return (fn) => {
    const listener = () => fn(mediaQuery.matches ? truthy : falsy)
    listeners.push(listener);
    listener();
    return () => {
      listeners.slice(listeners.findIndex(value => value === listener));
    };
  };
}

// USAGE

// Create the watcher
const colorScheme = watchMediaQuery('prefers-color-scheme', 'dark', 'light');

// Get initial state and start listening
const remove = colorScheme((value) => {
  console.log('Color scheme is', value);
});

// Stop listening
remove();