feat: Add theme settings

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'

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

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

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

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>

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>