From 17deb772cf90a56d9539aab3ce369e41c96c28ee Mon Sep 17 00:00:00 2001
From: JY Hsu <hsujoyao@gmail.com>
Date: Sun, 1 Sep 2024 12:58:34 +0800
Subject: [PATCH] feat: Add theme settings

---
 assets/scripts/features/theme/index.js        | 25 ++++++++-----------
 exampleSite/hugo.yaml                         | 12 ++++++++-
 layouts/_default/baseof.html                  |  2 +-
 layouts/index.html                            |  2 +-
 layouts/partials/navigators/navbar.html       |  2 +-
 .../partials/navigators/theme-selector.html   | 12 +++++++++
 6 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/assets/scripts/features/theme/index.js b/assets/scripts/features/theme/index.js
index e0da3eb..fb60421 100644
--- a/assets/scripts/features/theme/index.js
+++ b/assets/scripts/features/theme/index.js
@@ -1,8 +1,10 @@
-const PERSISTENCE_KEY = 'lightmode:color-scheme'
+import * as params from '@params';
+const PERSISTENCE_KEY = 'theme-scheme'
 
-const THEME_DARK = typeof process.env.FEATURE_THEME_DARK === 'undefined' ? false : process.env.FEATURE_THEME_DARK;
-const THEME_LIGHT = typeof process.env.FEATURE_THEME_LIGHT === 'undefined' ? false : process.env.FEATURE_THEME_LIGHT;
-const THEME_DEFAULT = typeof process.env.FEATURE_THEME_DEFAULT === 'system' ? false : process.env.FEATURE_THEME_DEFAULT;
+const themeOptions = params.theme || {}
+const THEME_DARK = typeof themeOptions.dark === 'undefined' ? false : themeOptions.dark;
+const THEME_LIGHT = typeof themeOptions.light === 'undefined' ? false : themeOptions.light;
+const THEME_DEFAULT = typeof themeOptions.default === 'undefined' ? "system" : themeOptions.default;
 
 window.addEventListener('load', async () => {
   const menu = document.getElementById('themeMenu')
@@ -18,13 +20,9 @@ window.addEventListener('load', async () => {
 
 
   function checkScheme(scheme) {
-    if (scheme === "light" && THEME_LIGHT) {
-      return "light"
-    }
-    if (scheme === "dark" && THEME_DARK) {
-      return "dark"
-    }
-    return "system"
+    if (THEME_LIGHT == false) return "dark"
+    if (THEME_DARK == false) return "light"
+    return scheme
   }
 
   function loadScheme() {
@@ -61,7 +59,8 @@ window.addEventListener('load', async () => {
     setImages(theme)
   }
 
-  setScheme(loadScheme())
+  const checkedScheme = checkScheme(loadScheme())
+  setScheme(checkedScheme)
 
   Array.from(menu.getElementsByTagName('a')).forEach((btn) => {
     btn.addEventListener('click', () => {
@@ -77,8 +76,6 @@ function setImages(newScheme) {
     const light = el.querySelector('.light-logo');
     const dark = el.querySelector('.dark-logo');
 
-
-
     if (newScheme === "dark" && dark !== null) {
       if (light !== null) light.style.display = 'none'
       dark.style.display = 'inline'
diff --git a/exampleSite/hugo.yaml b/exampleSite/hugo.yaml
index 88b75b8..112c6f2 100644
--- a/exampleSite/hugo.yaml
+++ b/exampleSite/hugo.yaml
@@ -91,10 +91,20 @@ params:
   # Configure various features of this theme
   features:
 
-    # Enable dark theme
+    # [Deprecated] Enable dark theme
+    # This is a deprecated setting, but has not been removed to maintain backward compatibility
+    # If `theme` is set, the `darkMode` setting will be discarded.
     darkMode:
       enable: true
 
+    # Configure theme color settings
+    theme:
+      enable: true
+      services:
+        light: true # enable light theme. default "true"
+        dark: true # enable dark theme. default "true"
+        default: system # can be either light, dark or system. default "system"
+
     # Enable and configure portfolio
     portfolio:
       enable: true
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 65f6364..0bc76f7 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -12,7 +12,7 @@
     <!--================= add analytics if enabled =========================-->
     {{- partial "analytics.html" . -}}
     <script>
-      theme = localStorage.getItem('darkmode:color-scheme') || 'system';
+      theme = localStorage.getItem('theme-scheme') || localStorage.getItem('darkmode:color-scheme') || 'system';
       if (theme == 'system') {
         if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
           theme = 'dark';
diff --git a/layouts/index.html b/layouts/index.html
index 5a1faf2..8ec6715 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -18,7 +18,7 @@
     <!--================= add analytics if enabled =========================-->
     {{- partial "analytics.html" . -}}
     <script>
-      theme = localStorage.getItem('darkmode:color-scheme') || 'system';
+      theme = localStorage.getItem('theme-scheme') || localStorage.getItem('darkmode:color-scheme') || 'system';
       if (theme == 'system') {
         if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
           theme = 'dark';
diff --git a/layouts/partials/navigators/navbar.html b/layouts/partials/navigators/navbar.html
index aad4b02..bb8274f 100644
--- a/layouts/partials/navigators/navbar.html
+++ b/layouts/partials/navigators/navbar.html
@@ -141,7 +141,7 @@
         {{ if .IsTranslated }}
           {{ partial "navigators/lang-selector.html" . }}
         {{ end }}
-        {{ if site.Params.features.darkMode.enable }}
+        {{ if or site.Params.features.darkMode.enable site.Params.features.theme.enable }}
           {{ partial "navigators/theme-selector.html" . }}
         {{ end }}
       </ul>
diff --git a/layouts/partials/navigators/theme-selector.html b/layouts/partials/navigators/theme-selector.html
index ddb4e03..fb9b1b2 100644
--- a/layouts/partials/navigators/theme-selector.html
+++ b/layouts/partials/navigators/theme-selector.html
@@ -1,15 +1,27 @@
+{{/*  variables for enabling/disabling various features  */}}
+{{ $darkEnabled  := true }}
+{{ $lightEnabled := true }}
+{{ if site.Params.features.theme.enable }}
+  {{ $darkEnabled   = site.Params.features.theme.services.dark   | default true }}
+  {{ $lightEnabled  = site.Params.features.theme.services.light  | default true }}
+{{ end }}
+
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle"  href="#" id="themeSelector" role="button"
   data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   <img id="navbar-theme-icon-svg" class="theme-icon" src="{{ "icons/moon-svgrepo-com.svg" | relURL }}" width=20 alt="Dark Theme">
 </a>
 <div id="themeMenu" class="dropdown-menu dropdown-menu-icons-only" aria-labelledby="themeSelector">
+  {{ if $lightEnabled }}
   <a class="dropdown-item nav-link" href="#" data-scheme="light">
     <img class="theme-icon" src="{{ "icons/sun-svgrepo-com.svg" | relURL }}" width=20 alt="Light Theme">
   </a>
+  {{ end }}
+  {{ if $darkEnabled }}
   <a class="dropdown-item nav-link" href="#" data-scheme="dark">
     <img class="theme-icon" src="{{ "icons/moon-svgrepo-com.svg" | relURL }}" width=20 alt="Dark Theme">
   </a>
+  {{ end }}
   <a class="dropdown-item nav-link" href="#" data-scheme="system">
     <img class="theme-icon" src="{{ "icons/computer-svgrepo-com.svg" | relURL }}" width=20 alt="System Theme">
   </a>