refactor(theme): align with upstream shadcn tanstack start

.oxfmtrc.json

@@ -6,5 +6,5 @@
     "stylesheet": "src/styles.css",
     "functions": ["cn", "cva"]
   },
-  "ignorePatterns": ["**/routeTree.gen.ts"]
+  "ignorePatterns": ["**/routeTree.gen.ts", "convex/_generated/**"]
 }

package.json

@@ -80,7 +80,6 @@
     "clsx": "^2.1.1",
     "convex": "^1.34.1",
     "convex-helpers": "^0.1.115",
-    "next-themes": "^0.4.6",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
     "sonner": "^2.0.7",

src/components/theme-provider.tsx

@@ -1,5 +1,5 @@
 import { ScriptOnce } from "@tanstack/react-router"
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react"
+import { createContext, useContext, useEffect, useState } from "react"
 
 type Theme = "dark" | "light" | "system"
 
@@ -14,77 +14,78 @@ type ThemeProviderState = {
   setTheme: (theme: Theme) => void
 }
 
-function buildThemeScript(storageKey: string, defaultTheme: Theme) {
-  return `(function(){try{var k=${JSON.stringify(storageKey)};var d=${JSON.stringify(defaultTheme)};var t=localStorage.getItem(k);if(t!=='light'&&t!=='dark'&&t!=='system'){t=d}var m=matchMedia('(prefers-color-scheme: dark)').matches;var r=t==='system'?(m?'dark':'light'):t;var e=document.documentElement;e.classList.add(r);e.style.colorScheme=r}catch(e){}})();`
+function getThemeScript(storageKey: string, defaultTheme: Theme) {
+  const key = JSON.stringify(storageKey)
+  const fallback = JSON.stringify(defaultTheme)
+
+  return `(function(){try{var t=localStorage.getItem(${key});if(t!=='light'&&t!=='dark'&&t!=='system'){t=${fallback}}var d=matchMedia('(prefers-color-scheme: dark)').matches;var r=t==='system'?(d?'dark':'light'):t;var e=document.documentElement;e.classList.add(r);e.style.colorScheme=r}catch(e){}})();`
 }
 
 const ThemeProviderContext = createContext<ThemeProviderState>({
   theme: "system",
   setTheme: () => {},
 })
 
-function resolveTheme(theme: Theme): "dark" | "light" {
-  if (theme !== "system") return theme
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
-}
-
-function applyTheme(resolved: "dark" | "light") {
+function applyTheme(theme: Theme) {
   const root = document.documentElement
   root.classList.remove("light", "dark")
+
+  const resolved =
+    theme === "system"
+      ? window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light"
+      : theme
+
   root.classList.add(resolved)
   root.style.colorScheme = resolved
 }
 
-function isTheme(value: unknown): value is Theme {
-  return value === "light" || value === "dark" || value === "system"
-}
-
 export function ThemeProvider({
   children,
   defaultTheme = "system",
   storageKey = "theme",
 }: ThemeProviderProps) {
-  const [theme, setThemeState] = useState<Theme>(() => {
-    if (typeof window === "undefined") return defaultTheme
+  const [theme, setThemeState] = useState<Theme>(defaultTheme)
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
     const stored = localStorage.getItem(storageKey)
-    return isTheme(stored) ? stored : defaultTheme
-  })
+    setThemeState(
+      stored === "light" || stored === "dark" || stored === "system" ? stored : defaultTheme,
+    )
+    setMounted(true)
+  }, [defaultTheme, storageKey])
 
-  const mounted = useRef(false)
   useEffect(() => {
-    if (!mounted.current) {
-      mounted.current = true
-      return
-    }
-    applyTheme(resolveTheme(theme))
-  }, [theme])
+    if (!mounted) return
+    applyTheme(theme)
+  }, [theme, mounted])
 
   useEffect(() => {
-    if (theme !== "system") return undefined
+    if (!mounted || theme !== "system") return undefined
+
     const media = window.matchMedia("(prefers-color-scheme: dark)")
-    const onChange = () => applyTheme(media.matches ? "dark" : "light")
+    const onChange = () => applyTheme("system")
     media.addEventListener("change", onChange)
     return () => media.removeEventListener("change", onChange)
-  }, [theme])
-
-  const setTheme = useCallback(
-    (next: Theme) => {
-      localStorage.setItem(storageKey, next)
-      setThemeState(next)
-    },
-    [storageKey],
-  )
+  }, [theme, mounted])
 
-  const value = useMemo(() => ({ theme, setTheme }), [theme, setTheme])
+  const setTheme = (next: Theme) => {
+    localStorage.setItem(storageKey, next)
+    setThemeState(next)
+  }
 
   return (
-    <ThemeProviderContext value={value}>
-      <ScriptOnce>{buildThemeScript(storageKey, defaultTheme)}</ScriptOnce>
+    <ThemeProviderContext value={{ theme, setTheme }}>
+      <ScriptOnce>{getThemeScript(storageKey, defaultTheme)}</ScriptOnce>
       {children}
     </ThemeProviderContext>
   )
 }
 
 export function useTheme() {
-  return useContext(ThemeProviderContext)
+  const context = useContext(ThemeProviderContext)
+  if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider")
+  return context
 }

src/components/ui/sonner.tsx

@@ -1,31 +1,24 @@
-"use client"
-
-import { useTheme } from "next-themes"
-import { Toaster as Sonner, type ToasterProps } from "sonner"
-import { HugeiconsIcon } from "@hugeicons/react"
 import Alert02Icon from "@hugeicons/core-free-icons/Alert02Icon"
 import CheckmarkCircle02Icon from "@hugeicons/core-free-icons/CheckmarkCircle02Icon"
 import InformationCircleIcon from "@hugeicons/core-free-icons/InformationCircleIcon"
 import Loading03Icon from "@hugeicons/core-free-icons/Loading03Icon"
 import MultiplicationSignCircleIcon from "@hugeicons/core-free-icons/MultiplicationSignCircleIcon"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+import { useTheme } from "@/components/theme-provider"
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+  const { theme } = useTheme()
 
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
+      theme={theme}
       className="toaster group"
       icons={{
-        success: (
-          <HugeiconsIcon icon={CheckmarkCircle02Icon} strokeWidth={2} className="size-4" />
-        ),
-        info: (
-          <HugeiconsIcon icon={InformationCircleIcon} strokeWidth={2} className="size-4" />
-        ),
-        warning: (
-          <HugeiconsIcon icon={Alert02Icon} strokeWidth={2} className="size-4" />
-        ),
+        success: <HugeiconsIcon icon={CheckmarkCircle02Icon} strokeWidth={2} className="size-4" />,
+        info: <HugeiconsIcon icon={InformationCircleIcon} strokeWidth={2} className="size-4" />,
+        warning: <HugeiconsIcon icon={Alert02Icon} strokeWidth={2} className="size-4" />,
         error: (
           <HugeiconsIcon icon={MultiplicationSignCircleIcon} strokeWidth={2} className="size-4" />
         ),