GoCaptcha

简体中文

English

简体中文

English

Appearance

验证码主题配置 ​

在 css 样式中，GoCaptcha 内置了可配置式的主题颜色变量

验证码相关 ​

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; // 拖拽Bar颜色
  --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; // 拖拽Bar颜色
  --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;  // 加载图标颜色

按钮相关 ​

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;

配置示例 ​

如：配置 dark 暗色主题色，可以静态/动态将 dark 类名设置至 body 的 class 使之生效。

css
.dark {
  --go-captcha-theme-text-color: #8f94a7 !important;
  --go-captcha-theme-bg-color: #18181a !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-active-color: #3e7cff !important;
  --go-captcha-theme-border-color: #3c3f44 !important;
  --go-captcha-theme-icon-color: #696d7b !important;
  --go-captcha-theme-drag-bar-color: #3c3f44 !important;
  --go-captcha-theme-drag-bg-color: #3e7cff !important;
  --go-captcha-theme-drag-icon-color: #ffffff !important;
  --go-captcha-theme-round-color: #3c3f44 !important;
  --go-captcha-theme-loading-icon-color: #3e7cff !important;
}
.dark {
  --go-captcha-theme-text-color: #8f94a7 !important;
  --go-captcha-theme-bg-color: #18181a !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-active-color: #3e7cff !important;
  --go-captcha-theme-border-color: #3c3f44 !important;
  --go-captcha-theme-icon-color: #696d7b !important;
  --go-captcha-theme-drag-bar-color: #3c3f44 !important;
  --go-captcha-theme-drag-bg-color: #3e7cff !important;
  --go-captcha-theme-drag-icon-color: #ffffff !important;
  --go-captcha-theme-round-color: #3c3f44 !important;
  --go-captcha-theme-loading-icon-color: #3e7cff !important;
}