theme-switch: Improve theme switch logic (#86)

- removes unnecessary local-storage item removal
- less inline script on build
- assumes `defaultTheme as auto when value is not `dark` or `light`
- should work according to table at docs

layouts/partials/footer.html

@@ -64,11 +64,5 @@
         }
     })
 
-</script>
-{{- else -}}
-{{/*  case where owner disables theme button after deployment, this resets the stored theme  */}}
-<script>
-    localStorage.removeItem("pref-theme");
-
 </script>
 {{- end }}

layouts/partials/header.html

@@ -1,26 +1,23 @@
+{{- /*  theme-toggle is enabled  */}}
+{{- if (not .Site.Params.disableThemeToggle) }}
+{{- /*  theme is light  */}}
 {{- if (eq .Site.Params.defaultTheme "light") }}
 <script>
     if (localStorage.getItem("pref-theme") === "dark") {
         document.body.classList.add('dark');
-    } else if (localStorage.getItem("pref-theme") === "light") {
-        document.body.classList.remove('dark')
-    } else {
-        document.body.classList.remove('dark')
     }
 
 </script>
+{{- /*  theme is dark  */}}
 {{- else if (eq .Site.Params.defaultTheme "dark") }}
 <script>
-    if (localStorage.getItem("pref-theme") === "dark") {
+    if (localStorage.getItem("pref-theme") === "light") {
-        document.body.classList.add('dark');
-    } else if (localStorage.getItem("pref-theme") === "light") {
         document.body.classList.remove('dark')
-    } else {
-        document.body.classList.add('dark');
     }
 
 </script>
-{{- else if (or (eq .Site.Params.defaultTheme "auto") (not .Site.Params.disableThemeToggle) ) }}
+{{- else }}
+{{- /*  theme is auto  */}}
 <script>
     if (localStorage.getItem("pref-theme") === "dark") {
         document.body.classList.add('dark');
@@ -30,6 +27,15 @@
         document.body.classList.add('dark');
     }
 
+</script>
+{{- end }}
+{{- /*  theme-toggle is disabled and theme is auto  */}}
+{{- else if (and (ne .Site.Params.defaultTheme "light") (ne .Site.Params.defaultTheme "dark"))}}
+<script>
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.body.classList.add('dark');
+    }
+
 </script>
 {{- end }}
 <noscript>