Split workspace into electron and ui packages

packages/ui/src/lib/theme.tsx

@@ -0,0 +1,117 @@
+import { createContext, createSignal, useContext, onMount, createEffect, type JSX } from "solid-js"
+import { storage, type ConfigData } from "./storage"
+
+interface ThemeContextValue {
+  isDark: () => boolean
+  toggleTheme: () => void
+  setTheme: (dark: boolean) => void
+}
+
+const ThemeContext = createContext<ThemeContextValue>()
+
+function applyTheme(dark: boolean) {
+  if (dark) {
+    document.documentElement.setAttribute("data-theme", "dark")
+    return
+  }
+
+  document.documentElement.removeAttribute("data-theme")
+}
+
+export function ThemeProvider(props: { children: JSX.Element }) {
+  const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)")
+  const [isDark, setIsDarkSignal] = createSignal(true) //systemPrefersDark.matches)
+  let themePreference: "system" | "dark" | "light" = "dark"
+
+  applyTheme(true) //systemPrefersDark.matches)
+
+  async function loadTheme() {
+    try {
+      const config = await storage.loadConfig()
+      const savedTheme = config.theme
+      let themeDark: boolean
+
+      if (savedTheme === "system") {
+        themePreference = "system"
+        themeDark = systemPrefersDark.matches
+      } else if (savedTheme === "dark") {
+        themePreference = "dark"
+        themeDark = true
+      } else if (savedTheme === "light") {
+        themePreference = "light"
+        themeDark = false
+      } else {
+        themePreference = "dark"
+        themeDark = true
+      }
+
+      setIsDarkSignal(themeDark)
+      applyTheme(themeDark)
+    } catch (error) {
+      console.warn("Failed to load theme from config:", error)
+      themePreference = "dark"
+      const themeDark = true
+      setIsDarkSignal(themeDark)
+      applyTheme(themeDark)
+    }
+  }
+
+  async function saveTheme(dark: boolean) {
+    try {
+      const config = await storage.loadConfig()
+      const nextPreference = dark ? "dark" : "light"
+      config.theme = nextPreference
+      themePreference = nextPreference
+      await storage.saveConfig(config)
+    } catch (error) {
+      console.warn("Failed to save theme to config:", error)
+    }
+  }
+
+  onMount(() => {
+    loadTheme()
+
+    const unsubscribe = storage.onConfigChanged(() => {
+      loadTheme()
+    })
+
+    // Listen for system theme changes
+    const handleSystemThemeChange = (event: MediaQueryListEvent) => {
+      if (themePreference === "system") {
+        setIsDarkSignal(event.matches)
+        applyTheme(event.matches)
+      }
+    }
+
+    systemPrefersDark.addEventListener("change", handleSystemThemeChange)
+
+    return () => {
+      unsubscribe()
+      systemPrefersDark.removeEventListener("change", handleSystemThemeChange)
+    }
+  })
+
+  createEffect(() => {
+    applyTheme(isDark())
+  })
+
+  const setTheme = (dark: boolean) => {
+    setIsDarkSignal(dark)
+    applyTheme(dark)
+    saveTheme(dark)
+  }
+
+  const toggleTheme = () => {
+    setTheme(!isDark())
+  }
+
+  return <ThemeContext.Provider value={{ isDark, toggleTheme, setTheme }}>{props.children}</ThemeContext.Provider>
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext)
+  if (!context) {
+    throw new Error("useTheme must be used within ThemeProvider")
+  }
+  return context
+}