Custom Theme

Every component in Wot Design Uni 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.