# 自定义主题 Wot UI 每个组件基本都有自定义类名 custom-class，可以在组件根节点加入你页面上的类名，进行样式修改。 ## 主题介绍 ### 主要变量介绍以下样式变量在多个组件中被使用，通过修改这些主要变量，可以快速定义一套自定义主题。 **主题色**为：

Theme Color

$-color-theme: #4D80F0

**主题品牌色-小渐变（按钮，渐变更弱）色**：

渐变倾斜角度45度左上角较浅，右下角较深

**品牌色-大渐变（大面积背景色/插件icon底色，渐变更强）**：

渐变倾斜角度45度右上角较浅，左下角较深

**功能色**：

Theme Color

$-color-theme: #4D80F0

Success Color

$-color-success: #34d19d

Warning Color

$-color-warning: #f0883a

Danger Color

$-color-danger: #fa4350

**辅助色**：

#8268de

#fa4350

#f0883a

#f0cf1d

#34d19d

#2bb3ed

### 中性色中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。

## 定制主题我们为每个组件提供了`css 变量`，可以参考[config-provider](../component/config-provider)组件的使用介绍来定制主题。