Widget Theming

Match the widget appearance to your brand and design system.

Built-in Themes

Light Theme

Clean white background, ideal for light-mode websites.

html

<gk-captcha sitekey="pk_live_..." theme="light"></gk-captcha>

Dark Theme

Dark background with amber accents, matches dark-mode UIs.

html

<gk-captcha sitekey="pk_live_..." theme="dark"></gk-captcha>

Auto Theme (Default)

Automatically switches between light and dark based on the user's system preference.

html

<!-- No theme attribute: follows the visitor's system setting -->
<gk-captcha sitekey="pk_live_..."></gk-captcha>

Widget Sizes

Choose a size that fits your layout.

html

<!-- Compact -->
<gk-captcha sitekey="pk_live_..." size="compact"></gk-captcha>

<!-- Normal (default) -->
<gk-captcha sitekey="pk_live_..."></gk-captcha>

RTL Support

The widget automatically adjusts for right-to-left languages.

html

<!-- Arabic: the widget switches to right-to-left -->
<gk-captcha sitekey="pk_live_..." lang="ar" theme="dark"></gk-captcha>

When lang is set to Arabic (ar), the widget layout, text alignment, and checkbox position all flip to RTL.

Accessibility

The widget is WCAG 2.2 AA compliant:

Text contrast ratio of at least 4.5:1
Interactive elements have visible focus states
Color is not the only indicator of state