Skip to content

自定义主题

Wot Design Uni 每1个组件基本都有自定义类名 custom-class,可以在组件根节点加入你页面上的类名,进行样式修改。

主题介绍

主要变量介绍

以下样式变量在多个组件中被使用,通过修改这些主要变量,可以快速定义一套自定义主题。

主题色为:

Theme Color

$-color-theme: #4D80F0

主题品牌色-小渐变(按钮,渐变更弱)色

渐变倾斜角度45度左上角较浅,右下角较深
  • A: #668DF8
  • B: #4F7CF8

品牌色-大渐变(大面积背景色/插件icon底色,渐变更强)

渐变倾斜角度45度右上角较浅,左下角较深
  • A: #769EF5
  • B: #517CF0

功能色

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

中性色

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

  • 100%
    重要文字
  • 85%
    普通文字
  • 65%
    遮罩、次要文字
    仅在层级复杂时使用
  • 45%
    辅助文字、次级按钮边框线
  • 25%
    失效、默认提示文字
  • 15%
    控件边框线
  • 9%
    若交叉使用则为实色#E8E8E8
  • 4%
    背景色、禁用填充色
  • 2%
    表头填充色
  • 100%
    重要文字
  • 85%
    普通文字
  • 65%
    遮罩、次要文字
    仅在层级复杂时使用
  • 45%
    辅助文字、次级按钮边框线
  • 25%
    失效、默认提示文字
  • 15%
    控件边框线
  • 9%
    若交叉使用则为实色#E8E8E8
  • 4%
    背景色、禁用填充色
  • 2%
    表头填充色

定制主题

我们为每个组件提供了css 变量,可以参考config-provider组件的使用介绍来定制主题。

Released under the MIT License.

Released under the MIT License.