Greasy Fork

SIMPLEST WORKING VERSION, click to expand ---

// https://pastebin.com/yc2yjgJk

const mq = window.matchMedia('(prefers-color-scheme: dark)');

const syncHtmlTheme = () => {
  const html = document.documentElement;
  if (!html) return;

  const wantDark = mq.matches;

  html.classList.toggle('theme-dark',  wantDark);
  html.classList.toggle('theme-light', !wantDark);
};

// initial sync
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', syncHtmlTheme, { once: true });
} else {
  syncHtmlTheme();
}

// react to system change
if (mq.addEventListener) {
  mq.addEventListener('change', syncHtmlTheme);
} else if (mq.addListener) {
  // old API
  mq.addListener(syncHtmlTheme);
}