foo

internal/v3/ui/assets/theme-switcher.js

@@ -7,10 +7,7 @@
 
 const themeSwitcher = {
   // Config
-  _scheme: "auto",
-  menuTarget: "details.dropdown",
-  buttonsTarget: "a[data-theme-switcher]",
-  buttonAttribute: "data-theme-switcher",
+  _scheme: "light",
   rootAttribute: "data-theme",
   localStorageKey: "picoPreferredColorScheme",
 
@@ -22,7 +19,10 @@ const themeSwitcher = {
 
   // Get color scheme from local storage
   get schemeFromLocalStorage() {
-    return window.localStorage?.getItem(this.localStorageKey) ?? this._scheme;
+    return (
+      window.localStorage?.getItem(this.localStorageKey) ??
+      this.preferredColorScheme
+    );
   },
 
   // Preferred color scheme
@@ -34,29 +34,25 @@ const themeSwitcher = {
 
   // Init switchers
   initSwitchers() {
-    const buttons = document.querySelectorAll(this.buttonsTarget);
-    buttons.forEach((button) => {
-      button.addEventListener(
-        "click",
-        (event) => {
-          event.preventDefault();
-          // Set scheme
-          this.scheme = button.getAttribute(this.buttonAttribute);
-          // Close dropdown
-          document.querySelector(this.menuTarget)?.removeAttribute("open");
-        },
-        false,
-      );
-    });
+    const toggleSwitch = document.getElementById("theme-toggle");
+
+    toggleSwitch.addEventListener(
+      "change",
+      (e) => {
+        e.preventDefault();
+        if (e.target.checked) {
+          this.scheme = "dark";
+        } else {
+          this.scheme = "light";
+        }
+      },
+      false,
+    );
   },
 
   // Set scheme
   set scheme(scheme) {
-    if (scheme == "auto") {
-      this._scheme = this.preferredColorScheme;
-    } else if (scheme == "dark" || scheme == "light") {
-      this._scheme = scheme;
-    }
+    this._scheme = scheme;
     this.applyScheme();
     this.schemeToLocalStorage();
   },

internal/v3/ui/components/page.templ

@@ -9,14 +9,15 @@ templ Page(title string, content templ.Component) {
 				<nav>
 					<ul>
 						<li>
-							<details class="dropdown">
-								<summary role="button" class="secondary">Theme</summary>
-								<ul>
-									<li><a href="#" data-theme-switcher="auto">Auto</a></li>
-									<li><a href="#" data-theme-switcher="light">Light</a></li>
-									<li><a href="#" data-theme-switcher="dark">Dark</a></li>
-								</ul>
-							</details>
+							<ul>
+								<li><strong>Dark Mode</strong></li>
+								<li>
+									<label for="theme-toggle" class="switch">
+										<input type="checkbox" id="theme-toggle"/>
+										<span class="slider"></span>
+									</label>
+								</li>
+							</ul>
 						</li>
 						<li>
 							<a href="/statistics">Stats</a>