# Custom Theme Every component in Wot UI basically has a custom class name custom-class, which can be added to your page's class name at the component's root node for style modification. ## Theme Introduction ### Main Variables Introduction The following style variables are used in multiple components. By modifying these main variables, you can quickly define a custom theme. **Theme Color**:

Theme Color

$-color-theme: #4D80F0

**Theme Brand Color - Small Gradient (Button, weaker gradient)**:

Gradient angle 45 degrees, lighter in top left, darker in bottom right

A: #668DF8
B: #4F7CF8

**Brand Color - Large Gradient (Large background/plugin icon background, stronger gradient)**:

Gradient angle 45 degrees, lighter in top right, darker in bottom left

A: #769EF5
B: #517CF0

**Function Colors**:

Theme Color

$-color-theme: #4D80F0

Success Color

$-color-success: #34d19d

Warning Color

$-color-warning: #f0883a

Danger Color

$-color-danger: #fa4350

**Auxiliary Colors**:

#8268de

#fa4350

#f0883a

#f0cf1d

#34d19d

#2bb3ed

### Neutral Colors Neutral colors are used for text, background, and border colors. Different neutral colors are used to express hierarchical structure.

100%
Important Text
85%
Normal Text
65%
Mask, Secondary Text
Only used when hierarchy is complex
45%
Auxiliary Text, Secondary Button Border
25%
Disabled, Default Prompt Text
15%
Control Border
9%
Use solid color #E8E8E8 if cross-used
4%
Background Color, Disabled Fill Color
2%
Table Header Fill Color

100%
Important Text
85%
Normal Text
65%
Mask, Secondary Text
Only used when hierarchy is complex
45%
Auxiliary Text, Secondary Button Border
25%
Disabled, Default Prompt Text
15%
Control Border
9%
Use solid color #E8E8E8 if cross-used
4%
Background Color, Disabled Fill Color
2%
Table Header Fill Color

## Customize Theme We provide CSS variables for each component. You can refer to the [config-provider](../component/config-provider) component's usage guide to customize the theme.