"use client"; import { ClerkProvider } from "@clerk/nextjs"; import { useTheme } from "next-themes"; import { dark } from "@clerk/themes"; import { ThemeProvider } from "../ThemeProvider"; import { useEffect, useState } from "react"; export function ClerkThemeProvider({ children, className, }: { children: JSX.Element; className: string; }) { const [theme, setTheme] = useState(""); return ( {children} {/** This *has* to be implemented in component form for the `useTheme` to load at the appropriate time. */} ); } function ThemeElement({ setTheme, }: { setTheme: (update: string | undefined) => void; }) { const theme = useTheme(); useEffect(() => { setTheme(theme.resolvedTheme); }, [theme.resolvedTheme, setTheme]); return <>; }