♻️ Dark mode rewrite

assets/js/appearance.js

@@ -0,0 +1,36 @@
+const browserIsDark =
+  window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+const userPreference = localStorage.getItem("appearance");
+const switcher = document.getElementById("appearance-switcher");
+
+if (
+  (browserIsDark && userPreference === null) ||
+  (browserIsDark && userPreference === "dark") ||
+  userPreference === "dark"
+) {
+  document.documentElement.classList.add("dark");
+}
+
+if (document.documentElement.getAttribute("data-auto-appearance") === "true") {
+  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
+    if (event.matches) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  });
+}
+
+window.addEventListener("DOMContentLoaded", (event) => {
+  switcher.addEventListener("click", () => {
+    document.documentElement.classList.toggle("dark");
+    localStorage.setItem(
+      "appearance",
+      document.documentElement.classList.contains("dark") ? "dark" : "light"
+    );
+  });
+  switcher.addEventListener("contextmenu", (event) => {
+    event.preventDefault();
+    localStorage.removeItem("appearance");
+  });
+});

assets/js/code.js

@@ -1,6 +1,6 @@
-var codeLang = document.getElementById("code-lang");
-var copyText = codeLang ? codeLang.getAttribute("data-copy") : "Copy";
-var copiedText = codeLang ? codeLang.getAttribute("data-copied") : "Copied";
+var scriptBundle = document.getElementById("script-bundle");
+var copyText = scriptBundle ? scriptBundle.getAttribute("data-copy") : "Copy";
+var copiedText = scriptBundle ? scriptBundle.getAttribute("data-copied") : "Copied";
 
 function createCopyButton(highlightDiv) {
   const button = document.createElement("button");

assets/js/dark.js

@@ -1,54 +0,0 @@
-function loadPreferredAppearance() {
-  if (
-    localStorage.preferredAppearance === "dark" ||
-    (!("preferredAppearance" in localStorage) &&
-      window.matchMedia("(prefers-color-scheme: dark)").matches)
-  ) {
-    document.documentElement.classList.add("dark");
-  } else {
-    document.documentElement.classList.remove("dark");
-  }
-}
-
-function setPreferredAppearance(scheme) {
-  if (scheme == "default") {
-    localStorage.removeItem("preferredAppearance");
-  } else {
-    localStorage.preferredAppearance = scheme;
-  }
-  loadPreferredAppearance();
-}
-
-window.addEventListener("DOMContentLoaded", (event) => {
-  // Hook up toggle events
-  darkToggle = document.getElementById("dark-toggle");
-  if (darkToggle) {
-    darkToggle.addEventListener("click", function (e) {
-      e.preventDefault();
-      setPreferredAppearance("dark");
-    });
-    darkToggle.addEventListener("contextmenu", function (e) {
-      e.preventDefault();
-      setPreferredAppearance("default");
-    });
-  }
-  lightToggle = document.getElementById("light-toggle");
-  if (lightToggle) {
-    lightToggle.addEventListener("click", function (e) {
-      e.preventDefault();
-      setPreferredAppearance("light");
-    });
-    lightToggle.addEventListener("contextmenu", function (e) {
-      e.preventDefault();
-      setPreferredAppearance("default");
-    });
-  }
-
-  // Load user's preset preference (if any)
-  loadPreferredAppearance();
-
-  // Allow browser media overrides
-  window
-    .matchMedia("(prefers-color-scheme: dark)")
-    .addEventListener("change", loadPreferredAppearance);
-});