feat: add theme system with dark/light/system support and persistence

apps/web/src/hooks/use-theme.ts

@@ -0,0 +1,22 @@
+import { useEffect } from "react";
+import { useThemeStore } from "../stores/theme-store";
+
+export function useTheme() {
+  const { theme, resolvedTheme, setTheme } = useThemeStore();
+
+  useEffect(() => {
+    const resolved =
+      theme === "system"
+        ? window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "dark"
+          : "light"
+        : theme;
+    document.documentElement.classList.toggle("dark", resolved === "dark");
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  };
+
+  return { theme, resolvedTheme, setTheme, toggleTheme };
+}

apps/web/src/stores/theme-store.ts

@@ -0,0 +1,32 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+type Theme = "light" | "dark" | "system";
+
+interface ThemeStore {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  resolvedTheme: "light" | "dark";
+}
+
+function getSystemTheme(): "light" | "dark" {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+}
+
+export const useThemeStore = create<ThemeStore>()(
+  persist(
+    (set) => ({
+      theme: "system",
+      resolvedTheme: getSystemTheme(),
+      setTheme: (theme) => {
+        const resolved = theme === "system" ? getSystemTheme() : theme;
+        document.documentElement.classList.toggle("dark", resolved === "dark");
+        set({ theme, resolvedTheme: resolved });
+      },
+    }),
+    { name: "stirling-image-theme" }
+  )
+);