Theming

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.

Example:

Themes

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)

Dark

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.

captchafox.render(element, {
  sitekey: 'YOUR_SITEKEY',
  theme: {
    // 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;
  };
}