Add theme toggle button with dark mode icon visibility

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;
+}

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>