chore(clerk): use theme from next theme insteadof manually detect it

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

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