add captcha to signin page

website/src/components/CloudfareCaptcha.tsx

@@ -1,8 +0,0 @@
-import { Turnstile } from "@marsidev/react-turnstile";
-import { forwardRef } from "react";
-
-export const CloudFareCatpcha = forwardRef((ref, props) => {
-  return <Turnstile siteKey={process.env.NEXT_PUBLIC_CLOUDFARE_CAPTCHA_SITE_KEY} />;
-});
-
-CloudFareCatpcha.displayName = "CloudFareCatpcha";

website/src/components/CloudflareCaptcha.tsx

@@ -0,0 +1,20 @@
+import { useColorMode } from "@chakra-ui/react";
+import { Turnstile, TurnstileInstance, TurnstileProps } from "@marsidev/react-turnstile";
+import { forwardRef } from "react";
+
+export const CloudFlareCatpcha = forwardRef<TurnstileInstance, Omit<TurnstileProps, "siteKey">>((props, ref) => {
+  const { colorMode } = useColorMode();
+  return (
+    <Turnstile
+      ref={ref}
+      {...props}
+      siteKey={process.env.NEXT_PUBLIC_CLOUDFLARE_CAPTCHA_SITE_KEY}
+      options={{
+        theme: colorMode,
+        ...props.options,
+      }}
+    />
+  );
+});
+
+CloudFlareCatpcha.displayName = "CloudFlareCatpcha";