stylus/js/dark-themer.js

/* global $ */// dom.js
/* global API msg */// msg.js
'use strict';

/**
 * This file must be loaded in a <script> tag placed after all the <link> tags
 * that contain dark themes so that the stylesheets are loaded by the time this script runs.
 * The CSS must use `@media screen and (prefers-color-scheme: dark), dark {}` that also works
 * in old browsers and ensures CSS loads before the first paint, then we toggle the media here,
 * which also happens before the first paint unless the browser "yields", but that's abnormal
 * and not even a problem in the most popular case of using system dark/light mode.
 */

API.colorScheme.isDark().then(isDark => {
  const ON = 'screen';
  const OFF = 'not all';
  const map = {[ON]: true, [OFF]: false};
  toggleDarkStyles();
  msg.onExtension(e => {
    if (e.method === 'colorScheme') {
      isDark = e.value;
      toggleDarkStyles();
    }
  });
  function toggleDarkStyles() {
    $.root.dataset.uiTheme = isDark ? 'dark' : 'light';
    for (const sheet of document.styleSheets) {
      for (const {media: m} of sheet.cssRules) {
        if (m && m[1] === 'dark' && map[m[0]] !== isDark) {
          m.mediaText = `${isDark ? ON : OFF},dark`;
        }
      }
    }
  }
});