From d4d30a0c3536657825f8be7f2e1d22dff3294bb1 Mon Sep 17 00:00:00 2001
From: Mivinci <1366723936@qq.com>
Date: Wed, 26 Jan 2022 20:39:49 +0800
Subject: [PATCH] authors now can pick a default theme color

---
 assets/js/theme.js         | 13 ++++++-------
 exampleSite/config.toml    |  2 ++
 layouts/partials/head.html | 15 ++++++++++++++-
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/assets/js/theme.js b/assets/js/theme.js
index 6a345f3..d6d13d9 100644
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -1,29 +1,28 @@
-const light = '{{ index .Site.Params.switch 1 }}'
-const dark = '{{ index .Site.Params.switch 0 }}'
+const icon_light = '{{ index .Site.Params.switch 1 }}'
+const icon_dark = '{{ index .Site.Params.switch 0 }}'
 const comment = '{{ .Site.Params.comment }}'
-const LIGHT = 'light', DARK = 'dark'
+const light = 'light', dark = 'dark'
 
 const themeSwitcher = document.getElementById('theme-switcher')
 
 // set switcher
-themeSwitcher.innerHTML = localStorage.theme === LIGHT ? light : dark
+themeSwitcher.innerHTML = localStorage.theme === light ? icon_light : icon_dark
 
 themeSwitcher.addEventListener('click', function () {
   const currentTheme = localStorage.theme
-  const newTheme = currentTheme === LIGHT ? DARK : LIGHT
+  const newTheme = currentTheme === light ? dark : light
   
   // switch global theme
   switchMinimaTheme(currentTheme, newTheme)
 
   // switch utterance theme if necessary
-
   if (comment === 'utterances')
     switchUtteranceTheme(`github-${newTheme}`)
 });
 
 function switchMinimaTheme(oldTheme, newTheme) {
   const { classList } = document.documentElement
-  const text = newTheme === LIGHT ? light : dark;
+  const text = newTheme === light ? icon_light : icon_dark;
   
   classList.remove(oldTheme);
   classList.add(newTheme);
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index d37e454..7b0adcc 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -33,6 +33,8 @@ comment = "utterances"
 timeformat = "Jan 02, 2006"
 # switch for turning on/off lights.
 switch = ["🌚", "🌝"]
+# default theme. e.g. light, dark, system
+defaultTheme = "system"
 # If set true, date of posts will be shown in the homepage.
 displayDate = true
 # If set true, users can select text from your post.
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index de99a58..1da50bc 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -29,12 +29,25 @@
   <script defer type="text/javascript" src="{{ $js.RelPermalink }}"></script>
 </head>
 <script>
+  // We will default to system theme color if no choice was made.
+  let theme_2b_used = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+
   try {
     if (!('theme' in localStorage)) {
-      localStorage.theme = window.matchMedia('(prefer-color-scheme: dark)').matches ? 'dark' : 'light';
+      const default_theme = '{{ .Site.Params.defaultTheme }}';
+      
+      // For the first time entering this site, use the theme picked by the author.
+      if (default_theme === 'dark' || default_theme === 'light') {
+        theme_2b_used = default_theme;
+      }
+
+      // Remember the choice.
+      localStorage.theme = theme_2b_used;
     }
+    
     document.querySelector('html').classList.add(localStorage.theme);
   } catch (e) {
     console.error(e);
   }
 </script>
+