Merge pull request #3 from cybertec-postgresql/theme-v2

feat: enhance theme customization

Author: Lana8Lee

config/_default/hugo.toml

@@ -7,3 +7,4 @@ tag = "tags"
 
 [params]
 geekdocCollapseAllSections = true
+geekdocCustomLayout = true

layouts/partials/site-header.html

@@ -51,10 +51,6 @@
             <title>{{ i18n "button_toggle_dark" }}</title>
             <use xlink:href="#gdoc_brightness_light"></use>
           </svg>
-          <svg class="gdoc-icon gdoc_brightness_auto">
-            <title>{{ i18n "button_toggle_dark" }}</title>
-            <use xlink:href="#gdoc_brightness_auto"></use>
-          </svg>
         </span>
 
         {{ if not (default false .Root.Site.Params.geekdocCustomLayout) }}

src/js/colorTheme.js

@@ -1,15 +1,38 @@
 import Storage from "store2"
-import { TOGGLE_COLOR_THEMES, THEME, COLOR_THEME_AUTO } from "./config.js"
+import {
+  TOGGLE_COLOR_THEMES,
+  THEME,
+  COLOR_THEME_AUTO,
+  COLOR_THEME_LIGHT,
+  COLOR_THEME_DARK,
+} from "./config.js"
 ;(() => {
   applyTheme()
 })()
 
+function resolveStoredColorTheme(stored) {
+  if (TOGGLE_COLOR_THEMES.includes(stored)) {
+    return stored
+  }
+  if (
+    stored === COLOR_THEME_AUTO ||
+    stored === undefined ||
+    stored === null ||
+    stored === ""
+  ) {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? COLOR_THEME_DARK
+      : COLOR_THEME_LIGHT
+  }
+  return COLOR_THEME_LIGHT
+}
+
 document.addEventListener("DOMContentLoaded", () => {
   const colorThemeToggle = document.getElementById("gdoc-color-theme")
 
   function toggleColorTheme() {
     let lstore = Storage.namespace(THEME)
-    let currentColorTheme = lstore.get("color-theme") || COLOR_THEME_AUTO
+    let currentColorTheme = resolveStoredColorTheme(lstore.get("color-theme"))
     let nextColorTheme = toggle(TOGGLE_COLOR_THEMES, currentColorTheme)
 
     lstore.set("color-theme", TOGGLE_COLOR_THEMES[nextColorTheme])
@@ -33,18 +56,16 @@ function applyTheme(init = true) {
 
   let lstore = Storage.namespace(THEME)
   let html = document.documentElement
-  let currentColorTheme = TOGGLE_COLOR_THEMES.includes(lstore.get("color-theme"))
-    ? lstore.get("color-theme")
-    : COLOR_THEME_AUTO
+  let raw = lstore.get("color-theme")
+  let currentColorTheme = resolveStoredColorTheme(raw)
 
-  html.setAttribute("class", "color-toggle-" + currentColorTheme)
-
-  if (currentColorTheme === COLOR_THEME_AUTO) {
-    html.removeAttribute("color-theme")
-  } else {
-    html.setAttribute("color-theme", currentColorTheme)
+  if (raw !== currentColorTheme) {
+    lstore.set("color-theme", currentColorTheme)
   }
 
+  html.setAttribute("class", "color-toggle-" + currentColorTheme)
+  html.setAttribute("color-theme", currentColorTheme)
+
   if (!init) {
     // Reload required to re-initialize e.g. Mermaid with the new theme
     // and re-parse the Mermaid code blocks.

src/js/config.js

@@ -1,5 +1,6 @@
 export const COLOR_THEME_DARK = "dark"
 export const COLOR_THEME_LIGHT = "light"
+/** @deprecated Legacy localStorage value; migrated to light or dark on read. */
 export const COLOR_THEME_AUTO = "auto"
 export const THEME = "hugo-geekdoc"
-export const TOGGLE_COLOR_THEMES = [COLOR_THEME_AUTO, COLOR_THEME_DARK, COLOR_THEME_LIGHT]
+export const TOGGLE_COLOR_THEMES = [COLOR_THEME_LIGHT, COLOR_THEME_DARK]

src/sass/_base.scss

@@ -56,7 +56,7 @@ html {
       .gdoc_brightness_light {
         display: inline-block;
       }
-      .gdoc_brightness_auto,
+
       .gdoc_brightness_dark {
         display: none;
       }
@@ -68,24 +68,10 @@ html {
       .gdoc_brightness_dark {
         display: inline-block;
       }
-      .gdoc_brightness_auto,
-      .gdoc_brightness_light {
-        display: none;
-      }
-    }
-  }
 
-  &.color-toggle-auto {
-    #gdoc-color-theme {
       .gdoc_brightness_light {
         display: none;
       }
-      .gdoc_brightness_dark {
-        display: none;
-      }
-      .gdoc_brightness_auto {
-        display: inline-block;
-      }
     }
   }
 }

src/sass/_custom-header.scss

@@ -147,10 +147,6 @@ body.gdoc-layout--custom {
     color: var(--cx-icon-brightness-dark);
   }
 
-  #gdoc-color-theme .gdoc_brightness_auto {
-    color: var(--cx-icon-brightness-auto);
-  }
-
   .gdoc-support__button a {
     display: inline-flex;
     align-items: center;

src/sass/_custom-shell.scss

@@ -73,12 +73,13 @@ body.gdoc-layout--custom {
 
   .cx-page-bg-art {
     position: fixed;
-    top: -27%;
+    top: -37%;
     right: -20%;
     width: min(50vw, 650px);
     max-width: 650px;
     pointer-events: none;
     z-index: 0;
+    opacity: 0.5;
     fill: var(--header-background);
   }
 

src/sass/_custom-tokens.scss

@@ -30,7 +30,6 @@
   /* Theme toggle icon colors (light theme) */
   --cx-icon-brightness-light: #eab308;
   --cx-icon-brightness-dark: #0ea5e9;
-  --cx-icon-brightness-auto: #6366f1;
 }
 
 /* Dark theme overrides for custom tokens */
@@ -57,5 +56,4 @@
   /* Theme toggle icon colors (dark theme) */
   --cx-icon-brightness-light: #facc15;
   --cx-icon-brightness-dark: #38bdf8;
-  --cx-icon-brightness-auto: #a5b4fc;
 }