Skip to content

多主题配置工具 v0.4.1+

说明

自 uView Pro 0.4.1 版本开始,uView Pro 提供了多套主题和暗黑模式配置工具,帮助用户快速配置主题。

uView Pro 目前可以自定义多套主题,包括主题色,字体颜色,边框颜色,背景颜色等,所有组件内部的样式,都基于同一套主题,比如您修改了primary主题色,所有用到了primary颜色的组件都会受影响。

基于以下主题配置工具可以配置多套主题!

配置教程

  1. 在打开的颜色拾取器中输入或者选择颜色,再点"确定"按钮即可;
  2. 颜色配置完后,在页面底部填写主题元信息(name/label/description)后,点击导出;
  3. 如果是导出多主题,可以配置好一套主题后添加到导出队列,再次配置其他主题,最终都添加到导出队列中,再点击导出;
  4. 最终导出会得到一个名为 uview-pro.theme.ts 的文件。

配置工具

提示

该工具支持单主题、多主题配置,支持智能生成颜色值、暗黑色值,随机主题颜色等。配置完成后点击导出,即可得到主题配置文件。

主题色

请为下列色票选择颜色,支持可选的暗黑模式色值。支持智能生成颜色值,随机主题颜色等。

色票分组

品牌与状态

主题主色与成功/警告/错误/信息色阶梯

主题色

主题色
primary
主题色(深)
primaryDark
主题色(禁用)
primaryDisabled
主题色(淡)
primaryLight

错误色

错误色
error
错误色(深)
errorDark
错误(禁用)
errorDisabled
错误(淡)
errorLight

警告色

警告色
warning
警告色(深)
warningDark
警告(禁用)
warningDisabled
警告(淡)
warningLight

信息色

信息色
info
信息色(深)
infoDark
信息(禁用)
infoDisabled
信息(淡)
infoLight

成功色

成功色
success
成功色(深)
successDark
成功(禁用)
successDisabled
成功(淡)
successLight

文本与描边

文字、提示与描边需要清晰的层级关系

文字阶梯

纯白色值
whiteColor
主要文字
mainColor
常规文字
contentColor
提示文字
tipsColor
占位/弱色
lightColor
纯黑色值
blackColor

描边与分割

边框颜色
borderColor
分割线
dividerColor

背景与表面

背景、卡片、深浅灰背景根据明暗形成阶梯

背景阶梯

纯白背景
bgWhite
背景色
bgColor
浅灰背景
bgGrayLight
深灰背景
bgGrayDark
黑色背景
bgBlack

遮罩与阴影

遮罩/阴影

遮罩颜色
maskColor
阴影颜色
shadowColor

实时预览

主题色
成功色
警告色
错误色
信息色

卡片标题

这是一段示例内容,用于展示文字色与背景色的搭配。

成功警告信息
提示:开启暗黑色值后,系统会基于亮色方案智能生成暗黑初始色值,您可以逐项覆盖。

请填写主题元信息(name/label/description),为上述已选择颜色赋予名称。

提示

如需多个主题,请先将当前已配置好的变量添加到导出队列,继续进行下一套主题配置,最后导出即可!