🚧 Add config parameters for dark appearance

layouts/partials/head.html

@@ -62,24 +62,31 @@
       integrity="{{ $customStyles.Data.Integrity }}"
     />
   {{ end }}
-  <script>
-    function loadPreferredScheme() {
-      if (localStorage.preferredScheme === 'dark' || (!('preferredScheme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-        document.documentElement.classList.add('dark');
-      } else {
-        document.documentElement.classList.remove('dark');
+  {{ 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 setPreferredScheme(scheme) {
-      if (scheme == "default") {
-        localStorage.removeItem("preferredScheme");
-      } else {
-        localStorage.preferredScheme = scheme;
+      function setPreferredAppearance(scheme) {
+        if (scheme == "default") {
+          localStorage.removeItem("preferredAppearance");
+        } else {
+          localStorage.preferredAppearance = scheme;
+        }
+        loadPreferredAppearance();
       }
-      loadPreferredScheme();
-    }
-    loadPreferredScheme();
-  </script>
+      loadPreferredAppearance();
+      window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance);
+    </script>
+  {{ else }}
+    <script>
+      localStorage.removeItem("preferredAppearance");
+    </script>
+  {{ end }}
   {{/* Icons */}}
   {{ if templates.Exists "partials/favicons.html" }}
     {{ partialCached "favicons.html" .Site }}