✨ add toggle for light/dark style

css/elements.css

@@ -1376,11 +1376,32 @@ a.menu-pane-header-production {
   display: none;
 }
 
+#menu-search-row {
+  display: flex;
+  gap: 4px;
+  margin: 5px 0 0 0;
+}
+
+#color-scheme-toggle {
+  display: flex;
+  align-items: center;
+  padding: 0 4px;
+  color: var(--control-dimmed-foreground-color);
+  background-color: var(--control-input-background-color);
+  border: 1px solid var(--control-input-border-color);
+  cursor: pointer;
+}
+
+#color-scheme-toggle:hover {
+  color: var(--foreground-color);
+}
+
 #menu-search-box {
   box-sizing: border-box;
   display: block;
-  width: 100%;
-  margin: 5px 0 0 0;
+  flex-grow: 1;
+  min-width: 0;
+  margin: 0;
   font-size: 1em;
   padding: 2px;
   color: var(--foreground-color);

js/menu.js

@@ -1160,6 +1160,48 @@ function makeLinkToId(id) {
   return path + '#' + id;
 }
 
+// The theme is chosen by `prefers-color-scheme` media queries, which script can't override,
+// so to show the opposite of the system's scheme we swap `light` and `dark` in those queries.
+let systemPrefersDark = matchMedia('(prefers-color-scheme: dark)');
+let colorSchemeInverted = false;
+
+// a change to the system's scheme is a new preference, so go back to following it
+systemPrefersDark.addEventListener('change', () => {
+  if (colorSchemeInverted) {
+    toggleColorScheme();
+  }
+});
+
+function toggleColorScheme() {
+  colorSchemeInverted = !colorSchemeInverted;
+  let dark = systemPrefersDark.matches !== colorSchemeInverted;
+  document.documentElement.style.colorScheme = colorSchemeInverted ? (dark ? 'dark' : 'light') : '';
+  for (let sheet of document.styleSheets) {
+    let rules;
+    try {
+      rules = sheet.cssRules;
+    } catch (e) {
+      // cross-origin stylesheets can't be inspected
+      continue;
+    }
+    invertColorSchemeQueries(rules);
+  }
+}
+
+function invertColorSchemeQueries(rules) {
+  for (let rule of rules) {
+    if (rule.media?.mediaText.includes('prefers-color-scheme')) {
+      rule.media.mediaText = rule.media.mediaText.replace(
+        /(prefers-color-scheme:\s*)(light|dark)/g,
+        (_, feature, scheme) => feature + (scheme === 'dark' ? 'light' : 'dark'),
+      );
+    }
+    if (rule.cssRules) {
+      invertColorSchemeQueries(rule.cssRules);
+    }
+  }
+}
+
 function doShortcut(e) {
   if (!(e.target instanceof HTMLElement)) {
     return;
@@ -1178,6 +1220,8 @@ function doShortcut(e) {
     document.documentElement.classList.toggle('show-uc-annotations');
   } else if (e.key === 'e') {
     document.documentElement.classList.toggle('show-early-exits');
+  } else if (e.key === 'd') {
+    toggleColorScheme();
   } else if (e.key === '?') {
     document.getElementById('shortcuts-help').classList.toggle('active');
   }
@@ -1188,6 +1232,7 @@ function init() {
     return;
   }
   menu = new Menu();
+  document.getElementById('color-scheme-toggle').addEventListener('click', toggleColorScheme);
   let $container = document.getElementById('spec-container');
   $container.addEventListener(
     'mouseover',

src/Menu.ts

@@ -34,7 +34,10 @@ export default function makeMenu(spec: Spec) {
   const searchContainer = spec.doc.createElement('div');
   searchContainer.setAttribute('id', 'menu-search');
   searchContainer.innerHTML =
-    '<input type=text id=menu-search-box placeholder=Search...><div id=menu-search-results class=inactive></div>';
+    '<div id=menu-search-row><input type=text id=menu-search-box placeholder=Search...>' +
+    '<button type=button id=color-scheme-toggle title="Toggle light/dark mode (d)" aria-label="Toggle light/dark mode">' +
+    '<svg viewBox="0 0 16 16" width=16 height=16 aria-hidden=true><circle cx=8 cy=8 r=6.5 fill=none stroke=currentColor stroke-width=1.5 /><path d="M8 1.5a6.5 6.5 0 0 1 0 13z" fill=currentColor /></svg>' +
+    '</button></div><div id=menu-search-results class=inactive></div>';
 
   const menuContainer = spec.doc.createElement('div');
   menuContainer.setAttribute('id', 'menu');

src/Spec.ts

@@ -1330,6 +1330,7 @@ ${await utils.readFile(path.join(__dirname, '../js/multipage.js'))}
   <li><span>Toggle shortcuts help</span><code>?</code></li>
   <li><span>Toggle "can call user code" annotations</span><code>u</code></li>
   <li><span>Toggle early exit annotations</span><code>e</code></li>
+  <li><span>Toggle light/dark mode</span><code>d</code></li>
 ${this.opts.multipage ? `<li><span>Navigate to/from multipage</span><code>m</code></li>` : ''}
   <li><span>Jump to search box</span><code>/</code></li>
   <li><span>Toggle pinning of the current clause</span><code>p</code></li>