From 4629494c03a0cdf7028644a54b61b71a047ad36b Mon Sep 17 00:00:00 2001
From: Junyi Hou <hji200914@gmail.com>
Date: Wed, 13 Mar 2024 16:42:54 +0800
Subject: [PATCH] rename "style" to "colorTheme", add "colorThemeSwitcher"

---
 layouts/partials/head.html           |   8 +-
 layouts/partials/theme-switcher.html | 107 ++++++++++++++-------------
 2 files changed, 58 insertions(+), 57 deletions(-)

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index c4c6ab0..b0c0768 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -21,12 +21,12 @@
 
 {{ partial "favicons.html" . }}
 
-{{ $style := "light-without-switcher" }}
-{{ if and (isset site.Params "style") (ne site.Params.style "") }}
-    {{ $style = site.Params.style | lower }}
+{{ $colorTheme := "light-without-switcher" }}
+{{ if and (isset site.Params "colortheme") (ne site.Params.colortheme "") }}
+    {{ $colorTheme = site.Params.colortheme | lower }}
 {{ end }}
 
-{{ if not (in (slice "light-without-switcher" "dark-without-switcher") $style) }}
+{{ if not (in (slice "light-without-switcher" "dark-without-switcher") $colorTheme) }}
 <style>
   body {
     visibility: hidden;
diff --git a/layouts/partials/theme-switcher.html b/layouts/partials/theme-switcher.html
index 90e85f5..af4de7d 100644
--- a/layouts/partials/theme-switcher.html
+++ b/layouts/partials/theme-switcher.html
@@ -1,65 +1,66 @@
-{{ $style := "light-without-switcher" }}
-{{ if and (isset site.Params "style") (ne site.Params.style "") }}
-{{ $style = site.Params.style | lower }}
+{{ $colorTheme := "light-without-switcher" }}
+
+{{ if and (isset site.Params "colortheme") (ne site.Params.colortheme "") }}
+    {{ $colorTheme = site.Params.colortheme | lower }}
 {{ end }}
 
-{{ if not (in (slice "light-without-switcher" "dark-without-switcher") $style) }}
-{{ if ne "auto-without-switcher" $style }}
-<div class="theme-switcher">
-    {{ partial "font-awesome.html" (dict "iconName" "theme-light" "custom" false) }}
-</div>
-{{ end }}
+{{ if not (in (slice "light-without-switcher" "dark-without-switcher") $colorTheme) }}
+    {{ if site.Params.colorthemeswitcher }}
+        <div class="theme-switcher">
+            {{ partial "font-awesome.html" (dict "iconName" "theme-light" "custom" false) }}
+        </div>
+    {{ end }}
 
-<script>
-    const STORAGE_KEY = 'user-color-scheme'
-    const defaultTheme = {{ $style }}
+    <script>
+        const STORAGE_KEY = 'user-color-scheme'
+        const defaultTheme = {{ $colorTheme }}
 
-    let currentTheme
-    let switchButton
-    let autoDefinedScheme = window.matchMedia('(prefers-color-scheme: dark)')
+        let currentTheme
+        let switchButton
+        let autoDefinedScheme = window.matchMedia('(prefers-color-scheme: dark)')
 
-    const autoChangeScheme = e => {
-        currentTheme = e.matches ? 'dark' : 'light'
-        document.documentElement.setAttribute('data-theme', currentTheme)
-    }
-
-    document.addEventListener('DOMContentLoaded', function () {
-        switchButton = document.querySelector('.theme-switcher')
-        currentTheme = detectCurrentScheme()
-        
-        if (currentTheme === 'auto') {
-            autoChangeScheme(autoDefinedScheme);
-            autoDefinedScheme.addListener(autoChangeScheme);
-        } else {
+        const autoChangeScheme = e => {
+            currentTheme = e.matches ? 'dark' : 'light'
             document.documentElement.setAttribute('data-theme', currentTheme)
         }
-    
-        if (switchButton) {
-            switchButton.addEventListener('click', switchTheme, false)
+
+        document.addEventListener('DOMContentLoaded', function () {
+            switchButton = document.querySelector('.theme-switcher')
+            currentTheme = detectCurrentScheme()
+            
+            if (currentTheme === 'auto') {
+                autoChangeScheme(autoDefinedScheme);
+                autoDefinedScheme.addListener(autoChangeScheme);
+            } else {
+                document.documentElement.setAttribute('data-theme', currentTheme)
+            }
+        
+            if (switchButton) {
+                switchButton.addEventListener('click', switchTheme, false)
+            }
+
+            showContent()
+        })
+
+        function detectCurrentScheme() {
+            if (localStorage !== null && localStorage.getItem(STORAGE_KEY)) {
+                return localStorage.getItem(STORAGE_KEY)
+            }
+            if (defaultTheme) {
+                return defaultTheme
+            }
+            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
         }
 
-        showContent()
-    })
-
-    function detectCurrentScheme() {
-        if (localStorage !== null && localStorage.getItem(STORAGE_KEY)) {
-            return localStorage.getItem(STORAGE_KEY)
+        function switchTheme(e) {
+            currentTheme = (currentTheme === 'dark') ? 'light' : 'dark';
+            if (localStorage) localStorage.setItem(STORAGE_KEY, currentTheme);
+            document.documentElement.setAttribute('data-theme', currentTheme);
         }
-        if (defaultTheme) {
-            return defaultTheme
+
+        function showContent() {
+            document.body.style.visibility = 'visible';
+            document.body.style.opacity = 1;
         }
-        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    }
-
-    function switchTheme(e) {
-        currentTheme = (currentTheme === 'dark') ? 'light' : 'dark';
-        if (localStorage) localStorage.setItem(STORAGE_KEY, currentTheme);
-        document.documentElement.setAttribute('data-theme', currentTheme);
-    }
-
-    function showContent() {
-        document.body.style.visibility = 'visible';
-        document.body.style.opacity = 1;
-    }
-</script>
+    </script>
 {{ end }}
\ No newline at end of file