♻️ 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");
+  });
+});