clerk auth dark mode

package.json

@@ -13,6 +13,7 @@
 		"web"
 	],
 	"dependencies": {
+		"@clerk/themes": "^2.1.27",
 		"@tauri-apps/cli": "^2.0.0-rc.12",
 		"@tauri-apps/plugin-fs": "^2.0.0-rc.2",
 		"jazz-nodejs": "0.7.35-guest-auth.5",

web/app/(auth)/sign-in/[[...sign-in]]/page.tsx

@@ -1,9 +1,19 @@
-import { SignInClient } from "@/components/custom/clerk/sign-in-client"
+// import { SignInClient } from "@/components/custom/clerk/sign-in-client"
+
+// export default async function Page() {
+// 	return (
+// 		<div className="flex justify-center py-24">
+// 			<SignInClient />
+// 		</div>
+// 	)
+// }
+
+import { SignUpClient } from "@/components/custom/clerk/sign-up-client"
 
 export default async function Page() {
 	return (
 		<div className="flex justify-center py-24">
-			<SignInClient />
+			<SignUpClient />
 		</div>
 	)
 }

web/components/custom/clerk/clerk-provider-client.tsx

@@ -1,7 +1,31 @@
 "use client"
-
 import { ClerkProvider } from "@clerk/nextjs"
+import { dark } from "@clerk/themes"
+import { useEffect, useState } from "react"
 
 export const ClerkProviderClient = ({ children }: { children: React.ReactNode }) => {
-	return <ClerkProvider>{children}</ClerkProvider>
+	const [darkMode, setDarkMode] = useState(false)
+
+	useEffect(() => {
+		const updateTheme = () => {
+			setDarkMode(document.documentElement.classList.contains("dark"))
+		}
+		updateTheme()
+
+		const observer = new MutationObserver(updateTheme)
+		observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] })
+
+		return () => observer.disconnect()
+	}, [])
+
+	return (
+		<ClerkProvider
+			appearance={{
+				baseTheme: darkMode ? dark : undefined,
+				variables: { colorPrimary: darkMode ? "#dddddd" : "#2e2e2e" }
+			}}
+		>
+			{children}
+		</ClerkProvider>
+	)
 }

web/components/custom/clerk/sign-in-client.tsx

@@ -1,7 +1,16 @@
-"use client"
+import { SignUp } from "@clerk/nextjs"
 
-import { SignIn } from "@clerk/nextjs"
+export const SignUpClient = () => {
-
+	return (
-export const SignInClient = () => {
+		<div className="flex justify-center">
-	return <SignIn />
+			<SignUp
+				appearance={{
+					elements: {
+						formButtonPrimary: "bg-primary text-primary-foreground",
+						card: "shadow-none"
+					}
+				}}
+			/>
+		</div>
+	)
 }