Skip to content

Configure Captcha Theme

In css styles, Go Captcha has built-in configurable theme color variables

Captcha

css
  --go-captcha-theme-text-color: #333333 !important;
  --go-captcha-theme-bg-color: #ffffff !important; 
  --go-captcha-theme-border-color: rgba(206, 223, 254, 0.5) !important;
  --go-captcha-theme-active-color: #3e7cff !important;
  --go-captcha-theme-btn-color: #ffffff !important;
  --go-captcha-theme-btn-bg-color: #4e87ff !important;
  --go-captcha-theme-btn-border-color: #4e87ff !important;
  --go-captcha-theme-icon-color: #3C3C3C !important; 
  --go-captcha-theme-drag-bar-color: #e0e0e0 !important; 
  --go-captcha-theme-drag-bg-color: #3e7cff !important; 
  --go-captcha-theme-drag-icon-color: #ffffff !important;
  --go-captcha-theme-round-color: #e0e0e0 !important;
  --go-captcha-theme-loading-icon-color: #3e7cff !important;
  --go-captcha-theme-text-color: #333333 !important;
  --go-captcha-theme-bg-color: #ffffff !important; 
  --go-captcha-theme-border-color: rgba(206, 223, 254, 0.5) !important;
  --go-captcha-theme-active-color: #3e7cff !important;
  --go-captcha-theme-btn-color: #ffffff !important;
  --go-captcha-theme-btn-bg-color: #4e87ff !important;
  --go-captcha-theme-btn-border-color: #4e87ff !important;
  --go-captcha-theme-icon-color: #3C3C3C !important; 
  --go-captcha-theme-drag-bar-color: #e0e0e0 !important; 
  --go-captcha-theme-drag-bg-color: #3e7cff !important; 
  --go-captcha-theme-drag-icon-color: #ffffff !important;
  --go-captcha-theme-round-color: #e0e0e0 !important;
  --go-captcha-theme-loading-icon-color: #3e7cff !important;

Button

css
  --go-captcha-theme-default-color: #ffffff !important; 
  --go-captcha-theme-default-bg-color: #ecf5ff !important;
  --go-captcha-theme-default-border-color: #50a1ff !important;
  --go-captcha-theme-default-hover-color: #e0efff !important;

  --go-captcha-theme-error-color: #ed4630 !important;
  --go-captcha-theme-error-bg-color: #fef0f0 !important;
  --go-captcha-theme-error-border-color: #ff5a34 !important;

  --go-captcha-theme-warn-color: #ffa000 !important;
  --go-captcha-theme-warn-bg-color: #fdf6ec !important;
  --go-captcha-theme-warn-border-color: #ffbe09 !important;

  --go-captcha-theme-success-color: #5eaa2f !important;
  --go-captcha-theme-success-bg-color: #f0f9eb !important;
  --go-captcha-theme-success-border-color: #8bc640 !important;
  --go-captcha-theme-default-color: #ffffff !important; 
  --go-captcha-theme-default-bg-color: #ecf5ff !important;
  --go-captcha-theme-default-border-color: #50a1ff !important;
  --go-captcha-theme-default-hover-color: #e0efff !important;

  --go-captcha-theme-error-color: #ed4630 !important;
  --go-captcha-theme-error-bg-color: #fef0f0 !important;
  --go-captcha-theme-error-border-color: #ff5a34 !important;

  --go-captcha-theme-warn-color: #ffa000 !important;
  --go-captcha-theme-warn-bg-color: #fdf6ec !important;
  --go-captcha-theme-warn-border-color: #ffbe09 !important;

  --go-captcha-theme-success-color: #5eaa2f !important;
  --go-captcha-theme-success-bg-color: #f0f9eb !important;
  --go-captcha-theme-success-border-color: #8bc640 !important;