♻️ Refactor dark mode inline JS to dark.js

CHANGELOG.md

@@ -14,6 +14,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Changed
 
 - Upgrade to Tailwind v3.0.12
+- Inline Javascript moved to external files
 - Author images are now Hugo assets
 - Required Hugo version is now 0.87.0 or later
 - Minor style and layout improvements

assets/js/dark.js

@@ -0,0 +1,54 @@
+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);
+});

layouts/partials/footer.html

@@ -43,8 +43,6 @@
       <div class="text-sm cursor-pointer text-neutral-400 dark:text-neutral-500">
         <button
           id="dark-toggle"
-          onclick="setPreferredAppearance('dark');"
-          oncontextmenu="setPreferredAppearance('default'); return false;"
           class="inline px-2 py-1 border rounded-md border-neutral-200 dark:hidden hover:text-primary-500 hover:border-primary-400"
           title="{{ i18n "footer.dark_appearance" }}"
         >
@@ -52,8 +50,6 @@
         </button>
         <button
           id="light-toggle"
-          onclick="setPreferredAppearance('light');"
-          oncontextmenu="setPreferredAppearance('default'); return false;"
           class="hidden px-2 py-1 border rounded-md cursor-pointer dark:inline border-neutral-700 hover:text-primary-400 hover:border-primary-500"
           title="{{ i18n "footer.light_appearance" }}"
         >

layouts/partials/head.html

@@ -63,29 +63,9 @@
     />
   {{ end }}
   {{ if eq (.Site.Params.darkMode | default "auto") "auto" }}
-    <script>
+    {{ $darkJS := resources.Get "js/dark.js" }}
-      function loadPreferredAppearance() {
+    {{ $darkJS := $darkJS | resources.Minify | resources.Fingerprint "sha512" }}    
-        if (localStorage.preferredAppearance === "dark" || (!("preferredAppearance" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
+    <script type="text/javascript" src="{{ $darkJS.RelPermalink }}" integrity="{{ $darkJS.Data.Integrity }}"></script>
-          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();
-      }
-      loadPreferredAppearance();
-      window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance);
-    </script>
-  {{ else }}
-    <script>
-      localStorage.removeItem("preferredAppearance");
-    </script>
   {{ end }}
   {{/* Icons */}}
   {{ if templates.Exists "partials/favicons.html" }}