authors now can pick a default theme color

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);

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.

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>
+