add 3 toggle botons

app/javascript/controllers/theme_controller.js

@@ -1,48 +1,63 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["sunIcon", "moonIcon"]
+  static targets = ["lightBtn", "darkBtn", "autoBtn"]
 
   connect() {
     this.applyStoredTheme()
-    this.updateIcon()
+    this.updateButtons()
   }
 
-  toggle() {
-    const currentTheme = document.documentElement.getAttribute("data-theme")
-    // If no theme is set, check system preference or default to light
-    let newTheme
-    if (!currentTheme) {
-      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
-      newTheme = prefersDark ? "light" : "dark"
-    } else {
-      newTheme = currentTheme === "dark" ? "light" : "dark"
-    }
-    this.setTheme(newTheme)
-    this.updateIcon()
+  setLight() {
+    this.setTheme("light")
+    document.documentElement.setAttribute("data-theme", "light")
+    this.updateButtons()
+  }
+
+  setDark() {
+    this.setTheme("dark")
+    document.documentElement.setAttribute("data-theme", "dark")
+    this.updateButtons()
+  }
+
+  setAuto() {
+    this.setTheme("auto")
+    document.documentElement.removeAttribute("data-theme")
+    this.updateButtons()
   }
 
   setTheme(theme) {
-    document.documentElement.setAttribute("data-theme", theme)
     localStorage.setItem("theme", theme)
   }
 
   applyStoredTheme() {
-    const storedTheme = localStorage.getItem("theme")
-    if (storedTheme) {
-      document.documentElement.setAttribute("data-theme", storedTheme)
+    const storedTheme = localStorage.getItem("theme") || "auto"
+
+    if (storedTheme === "light") {
+      document.documentElement.setAttribute("data-theme", "light")
+    } else if (storedTheme === "dark") {
+      document.documentElement.setAttribute("data-theme", "dark")
+    } else {
+      // auto - don't set data-theme, let CSS media query handle it
+      document.documentElement.removeAttribute("data-theme")
     }
   }
 
-  updateIcon() {
-    const currentTheme = document.documentElement.getAttribute("data-theme")
-    const isDark = currentTheme === "dark" ||
-                   (!currentTheme && window.matchMedia("(prefers-color-scheme: dark)").matches)
+  updateButtons() {
+    const storedTheme = localStorage.getItem("theme") || "auto"
 
-    // Show moon icon in light mode, sun icon in dark mode
-    if (this.hasSunIconTarget && this.hasMoonIconTarget) {
-      this.sunIconTarget.style.display = isDark ? "block" : "none"
-      this.moonIconTarget.style.display = isDark ? "none" : "block"
+    // Reset all buttons
+    if (this.hasLightBtnTarget) this.lightBtnTarget.removeAttribute("aria-selected")
+    if (this.hasDarkBtnTarget) this.darkBtnTarget.removeAttribute("aria-selected")
+    if (this.hasAutoBtnTarget) this.autoBtnTarget.removeAttribute("aria-selected")
+
+    // Highlight active button
+    if (storedTheme === "light" && this.hasLightBtnTarget) {
+      this.lightBtnTarget.setAttribute("aria-selected", "true")
+    } else if (storedTheme === "dark" && this.hasDarkBtnTarget) {
+      this.darkBtnTarget.setAttribute("aria-selected", "true")
+    } else if (this.hasAutoBtnTarget) {
+      this.autoBtnTarget.setAttribute("aria-selected", "true")
     }
   }
 }