Move to TanStack Start from Next.js (#184)

web/app/lib/providers/clerk-provider.tsx

@@ -0,0 +1,23 @@
+import { ClerkProvider as BaseClerkProvider } from "@clerk/tanstack-start"
+import { dark } from "@clerk/themes"
+import { useTheme } from "next-themes"
+
+interface ClerkProviderProps {
+  children: React.ReactNode
+}
+
+export const ClerkProvider: React.FC<ClerkProviderProps> = ({ children }) => {
+  const { theme, systemTheme } = useTheme()
+
+  const isDarkTheme =
+    theme === "dark" || (theme === "system" && systemTheme === "dark")
+
+  const appearance = {
+    baseTheme: isDarkTheme ? dark : undefined,
+    variables: { colorPrimary: isDarkTheme ? "#dddddd" : "#2e2e2e" },
+  }
+
+  return (
+    <BaseClerkProvider appearance={appearance}>{children}</BaseClerkProvider>
+  )
+}