From 3064e8cfc5fa7e41e80ecdcd57f80276391c4a15 Mon Sep 17 00:00:00 2001
From: Itay Cohen <itaycohen23@gmail.com>
Date: Wed, 4 Nov 2020 10:34:45 +0200
Subject: [PATCH] theme-switch: Enable theme toggle unless specifically
 disabled (#69)

Co-authored-by: Aditya Telange <21258296+adityatelange@users.noreply.github.com>
---
 layouts/partials/footer.html |  4 ++--
 layouts/partials/header.html | 29 ++++++++++++++++++++---------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index f3baf823..3094209b 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -50,7 +50,7 @@
         localStorage.setItem("menu-scroll-position", document.getElementById('menu').scrollLeft);
     }
 </script>
-{{- if (and (not .Site.Params.disableThemeToggle) (not (or (eq .Site.Params.defaultTheme "light") (eq .Site.Params.defaultTheme "dark")))) }}
+{{- if (not .Site.Params.disableThemeToggle) }}
 <script>
     document.getElementById("theme-toggle").addEventListener("click", () => {
         if (document.body.className.includes("dark")) {
@@ -63,7 +63,7 @@
     })
 </script>
 {{- else -}}
-<!-- case where owner disables theme button after deployment, this resets the stored theme -->
+{{/*  case where owner disables theme button after deployment, this resets the stored theme  */}}
 <script>
     localStorage.removeItem("pref-theme");
 </script>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 233587b1..0a433b91 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,21 +1,32 @@
-{{- if (and (not .Site.Params.disableThemeToggle) (not (or (eq .Site.Params.defaultTheme "light") (eq .Site.Params.defaultTheme "dark")))) }}
+{{- if (eq .Site.Params.defaultTheme "light") }}
 <script>
-    // load memory
     if (localStorage.getItem("pref-theme") === "dark") {
         document.body.classList.add('dark');
     } else if (localStorage.getItem("pref-theme") === "light") {
         document.body.classList.remove('dark')
     } else {
-        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            document.body.classList.add('dark');
-        }
+        document.body.classList.remove('dark')
     }
 
 </script>
-{{- end }}
-{{- if (and (.Site.Params.disableThemeToggle) (eq .Site.Params.defaultTheme "auto")) }}
+{{- else if (eq .Site.Params.defaultTheme "dark") }}
 <script>
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    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.add('dark');
+    }
+
+</script>
+{{- else if (or (eq .Site.Params.defaultTheme "auto") (not .Site.Params.disableThemeToggle) ) }}
+<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 if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
         document.body.classList.add('dark');
     }
 
@@ -41,7 +52,7 @@
                 {{- .Site.Params.label.text | default .Site.Title -}}
             </a>
             <span class="logo-switches">
-                {{- if (and (not .Site.Params.disableThemeToggle) (not (or (eq .Site.Params.defaultTheme "light") (eq .Site.Params.defaultTheme "dark")))) }}
+                {{- if (not .Site.Params.disableThemeToggle) }}
                 <span class="theme-toggle">
                     <a id="theme-toggle" accesskey="t">
                         <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"