自定义主题
Wot Design Uni 每个组件基本都有自定义类名 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组件的使用介绍来定制主题。