Clerk Themed Provider ( based on next-theme)

Clerk Themed Provider.tsx

'use client';

import { ClerkProvider } from "@clerk/nextjs";
import { dark } from "@clerk/themes";
import { useTheme } from "next-themes";

export function ClerkThemedProvider({ children }: { children: React.ReactNode }) {
  const { resolvedTheme } = useTheme();
  const clerkTheme = resolvedTheme === 'dark' ? dark : undefined;

  return (
    <ClerkProvider appearance={{ baseTheme: clerkTheme }}>
      {children}
    </ClerkProvider>
  );
}

Usage:

<ClerkThemedProvider>
    <main className="min-h-screen">{children}</main>
</ClerkThemedProvider>