Auto Theme

Automatic theme detection for CAPTCHA providers that don't natively support "auto" theme.

Auto Theme

The library automatically detects your users' system theme preference and applies it to CAPTCHA providers that don't natively support "auto" theme.

How It Works

When you set theme: "auto", the library detects the system theme using prefers-color-scheme and converts it to "light" or "dark" before passing it to the provider.

import { ReCaptcha } from "@better-captcha/react/provider/recaptcha";

<ReCaptcha 
  sitekey="your-site-key"
  options={{ theme: "auto" }} // Automatically detects system theme
/>

import { component$ } from "@builder.io/qwik";
import { ReCaptcha } from "@better-captcha/qwik/provider/recaptcha";

export default component$(() => (
  <ReCaptcha 
    sitekey="your-site-key"
    options={{ theme: "auto" }} // Automatically detects system theme
  />
));

import { ReCaptcha } from "@better-captcha/solidjs/provider/recaptcha";

<ReCaptcha 
  sitekey="your-site-key"
  options={{ theme: "auto" }} // Automatically detects system theme
/>

<template>
  <ReCaptcha
    sitekey="your-site-key"
    :options="{ theme: 'auto' }" <!-- Automatically detects system theme -->
  />
</template>

<script setup lang="ts">
import { ReCaptcha } from "@better-captcha/vue/provider/recaptcha";
</script>

<script lang="ts">
import ReCaptcha from "@better-captcha/svelte/provider/recaptcha";
</script>

<ReCaptcha 
  sitekey="your-site-key"
  options={{ theme: "auto" }} <!-- Automatically detects system theme -->
/>

Provider Support

Provider	Native auto theme support	Enhanced with auto theme
Turnstile	✅	❌
FriendlyCaptcha	✅	❌
reCAPTCHA	❌	✅
hCaptcha	❌	✅
PrivateCaptcha	❌	✅
CaptchaFox	❌	✅
Prosopo	❌	✅

Auto Theme

Auto Theme

How It Works

Provider Support

On this page