♻️ Refactor dark mode inline JS to dark.js

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>
-      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();
-      }
-      loadPreferredAppearance();
-      window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance);
-    </script>
-  {{ else }}
-    <script>
-      localStorage.removeItem("preferredAppearance");
-    </script>
+    {{ $darkJS := resources.Get "js/dark.js" }}
+    {{ $darkJS := $darkJS | resources.Minify | resources.Fingerprint "sha512" }}    
+    <script type="text/javascript" src="{{ $darkJS.RelPermalink }}" integrity="{{ $darkJS.Data.Integrity }}"></script>
   {{ end }}
   {{/* Icons */}}
   {{ if templates.Exists "partials/favicons.html" }}