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's usage guide to customize the theme.