31 lines
911 B
TypeScript
31 lines
911 B
TypeScript
"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>
|
|
);
|
|
}
|