PreRelease v1

app/clerk-provider.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { ClerkProvider } from "@clerk/nextjs";
+import { dark } from "@clerk/themes";
+import { useTheme } from "next-themes";
+import { ReactNode } from "react";
+
+export function ClerkThemeProvider({ children }: { children: ReactNode }) {
+  const { resolvedTheme } = useTheme();
+  const isDark = resolvedTheme === "dark";
+
+  return (
+    <ClerkProvider
+      appearance={{
+        baseTheme: isDark ? dark : undefined,
+        variables: {
+          colorPrimary: isDark ? "#60A5FA" : "#2563EB",
+          colorBackground: isDark ? "#0F172A" : "#FFFFFF",
+          colorInputBackground: isDark ? "#111827" : "#FFFFFF",
+          colorInputText: isDark ? "#E2E8F0" : "#0F172A",
+          colorText: isDark ? "#E2E8F0" : "#0F172A",
+          colorTextSecondary: isDark ? "#94A3B8" : "#475569",
+          borderRadius: "0.75rem",
+        },
+      }}
+    >
+      {children}
+    </ClerkProvider>
+  );
+}