minify the theme restoration script injected into head

also switches the MDX minifier to uglify-js for consistency
2026-04-21 11:25:29 -04:00 · 2022-04-21 14:05:11 -04:00
parent 05469218b1
commit 008bb3213b
5 changed files with 237 additions and 254 deletions
@@ -0,0 +1,27 @@
+/* eslint-disable no-var */
+
+// this function is converted to a string verbatim, substitutions are made to insert dynamic values, minified, and then
+// finally exported as an inline `<script>` tag in ThemeScript.tsx for pages/_document.tsx to use.
+export const clientScript = () => {
+  // `try/catch` in case I messed something up here bigly... (will default to light theme)
+  try {
+    // user's saved preference:
+    var pref = localStorage.getItem("__STORAGE_KEY__");
+    // map of theme -> classname:
+    var classNames = "__CLASS_NAMES__";
+    // the list of <html>'s current class(es), from which `classNames` are removed to start fresh
+    // eslint-disable-next-line prefer-destructuring
+    var classList = document.documentElement.classList;
+    classList.remove("__LIST_OF_CLASSES__");
+
+    if (pref === "light" || pref === "dark") {
+      classList.add(classNames[pref]);
+    } else {
+      // CSS media query for system dark mode preference:
+      var darkQuery = "__MEDIA_QUERY__";
+      // the listener which tests the above media query:
+      var prefersDark = window.matchMedia(darkQuery);
+      classList.add(classNames[prefersDark.media !== darkQuery || prefersDark.matches ? "dark" : "light"]);
+    }
+  } catch (error) {} // eslint-disable-line no-empty
+};