From b301d60f032879af25dc9c5747c868db9bf7cc6c Mon Sep 17 00:00:00 2001
From: Aditya Telange <21258296+adityatelange@users.noreply.github.com>
Date: Thu, 26 Nov 2020 09:10:24 +0530
Subject: [PATCH] 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 |  6 ------
 layouts/partials/header.html | 26 ++++++++++++++++----------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 779cd697..90cbeec0 100644
--- a/layouts/partials/footer.html
+++ b/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 }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index c68db5c2..0066a795 100644
--- a/layouts/partials/header.html
+++ b/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") {
-        document.body.classList.add('dark');
-    } else if (localStorage.getItem("pref-theme") === "light") {
+    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>