CaptchaFox can be adapted to your brand colours through the customizing the theme options.
This can be done through settings in the Admin Portal, by selecting a pre-built theme, or by providing your own.


Custom Theme


The following base themes can be enabled by providing the data-theme attribute on the container element or the theme property using the JavaScript API.

Light (Default)

Light Theme


Dark Theme

Portal Settings

The CaptchaFox Admin Portal allows users with the appropriate permissions to quickly and easily update colors and settings without the assistence of a developer.

The following theme settings can be adjusted via the Portal:

  • Show/Hide CaptchaFox Logo (Only available within the Portal)
  • Primary Color
  • Error Color
  • Success Color
  • Border Radius

Custom Theme (Beta)

A custom theme can be specified at the time of rendering to override all of the theme options. This allows you to fully customise the design to reflect your own brand.

As the custom theme has a higher priority, theme changes made through the Portal UI will no longer be applied.

captchafox.render(element, {
  sitekey: 'YOUR_SITEKEY',
  theme: {
    // Theme Definition
Theme Definition
  general: {
    primary: string;
    success: string;
    error: string;
    borderRadius: number;
  button: {
    background: string;
    backgroundHover: string;
    text: string;
    checkbox: string;
  panel: {
    background: string;
    border: string;
    text: string;
  slider: {
    background: string;
    knob: string;