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.

javascript

gkCaptcha.render('container', {
  siteKey: 'your-site-key',
  theme: 'light'
});

Dark Theme

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

javascript

gkCaptcha.render('container', {
  siteKey: 'your-site-key',
  theme: 'dark'
});

Auto Theme

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

javascript

gkCaptcha.render('container', {
  siteKey: 'your-site-key',
  theme: 'auto' // Follows system preference
});

Custom Colors

Define your own color palette to match your brand.

javascript

gkCaptcha.render('container', {
  siteKey: 'your-site-key',
  theme: 'custom',
  colors: {
    primary: '#d97706',      // Amber-600
    background: '#1c1917',   // Stone-900
    text: '#fafaf9',         // Stone-50
    border: '#44403c',       // Stone-700
    success: '#22c55e',      // Green-500
    error: '#ef4444'         // Red-500
  }
});

Property	Description	Default (Dark)
primary	Accent color for interactive elements	#d97706
background	Widget background	#1c1917
text	Primary text color	#fafaf9
border	Border and divider color	#44403c
success	Verification success state	#22c55e
error	Error state	#ef4444

Widget Sizes

Choose a size that fits your layout.

javascript

// Compact - 240px wide
gkCaptcha.render('container', {
  siteKey: 'your-site-key',
  size: 'compact'
});

// Normal - 300px wide (default)
gkCaptcha.render('container', {
  siteKey: 'your-site-key',
  size: 'normal'
});

// Full width - 100% of container
gkCaptcha.render('container', {
  siteKey: 'your-site-key',
  size: 'full'
});

RTL Support

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

javascript

gkCaptcha.render('container', {
  siteKey: 'your-site-key',
  language: 'ar',  // Arabic - automatically enables RTL
  theme: 'dark'
});

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

CSS Variables

For advanced customization, override CSS variables directly.

styles.css

/* Override widget CSS variables */
.gk-captcha {
  --gk-primary: #d97706;
  --gk-bg: #1c1917;
  --gk-text: #fafaf9;
  --gk-border: #44403c;
  --gk-radius: 12px;
  --gk-font: 'Plus Jakarta Sans', sans-serif;
}

Note: CSS variables take precedence over JavaScript theme configuration.

Accessibility

The widget is WCAG 2.2 AA compliant. When customizing colors, ensure:

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