From 85d369c13af9443b552c43fb281637245e0ce488 Mon Sep 17 00:00:00 2001
From: fukunee <fukun.ee@foxmail.com>
Date: Thu, 14 May 2026 00:14:55 +0800
Subject: [PATCH] Add theme toggle button with dark mode icon visibility

---
 assets/css/custom.css               | 14 ++++++++++++++
 layouts/_partials/theme-toggle.html | 25 +++++++++++++++++++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 layouts/_partials/theme-toggle.html

diff --git a/assets/css/custom.css b/assets/css/custom.css
index a6c165e..9f2aea1 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -54,3 +54,17 @@ nav a:first-of-type img {
 body:where(.dark) {
     background-color: #000;
 }
+
+/* Theme toggle icon visibility */
+.theme-toggle-dark {
+    display: none;
+}
+.theme-toggle-light {
+    display: inline;
+}
+html.dark .theme-toggle-dark {
+    display: inline;
+}
+html.dark .theme-toggle-light {
+    display: none;
+}
diff --git a/layouts/_partials/theme-toggle.html b/layouts/_partials/theme-toggle.html
new file mode 100644
index 0000000..8396ea2
--- /dev/null
+++ b/layouts/_partials/theme-toggle.html
@@ -0,0 +1,25 @@
+{{- $iconHeight := .iconHeight | default 20 -}} {{- $class := .class | default
+"hx:p-2" -}}
+
+<button
+    type="button"
+    aria-label="Toggle theme"
+    class="hx:cursor-pointer hx:rounded-md hx:hover:bg-gray-100 hx:dark:hover:bg-neutral-800 hx:transition-colors {{ $class }}"
+    onclick="
+        (function () {
+            var h = document.documentElement;
+            var n = h.classList.contains('dark') ? 'light' : 'dark';
+            setTheme(n);
+            localStorage.setItem('color-theme', n);
+        })()
+    "
+>
+    <span class="theme-toggle-dark">
+        {{- partial "utils/icon.html" (dict "name" "sun" "attributes" (printf
+        `height=%d` $iconHeight)) -}}
+    </span>
+    <span class="theme-toggle-light">
+        {{- partial "utils/icon.html" (dict "name" "moon" "attributes" (printf
+        `height=%d` $iconHeight)) -}}
+    </span>
+</button>