Add Theme Switcher

app/javascript/controllers/theme_controller.js

@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["sunIcon", "moonIcon"]
+
+  connect() {
+    this.applyStoredTheme()
+    this.updateIcon()
+  }
+
+  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()
+  }
+
+  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)
+    }
+  }
+
+  updateIcon() {
+    const currentTheme = document.documentElement.getAttribute("data-theme")
+    const isDark = currentTheme === "dark" ||
+                   (!currentTheme && window.matchMedia("(prefers-color-scheme: dark)").matches)
+
+    // 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"
+    }
+  }
+}