# 自定义主题

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

# 教程

  1. 可以在打开的颜色拾取器中输入或者选择颜色,再点"确定"按钮即可。
  2. 颜色配置完后,在页面底部下载文件,会得到一个名为uview.theme.scss的文件。
  3. 将文件复制到项目的公共目录(视情况而定)中,再在项目根目录的uni.scss中引入即可。
  4. 删除uni.scss文件中原来引入的@import 'uview-ui/theme.scss';(旧的内置主题文件引入语句)。
  5. 重新编译项目或者重启HX即可生效。

# 主题色

目前有五个主题色,每个主题色又分别有对应的light(淡色)、dark(深色)、disabled(禁止状态时的颜色):

primary
#2979ff
success
#19be6b
error
#fa3534
warning
#ff9900
info
#909399
primary-dark
#2b85e4
success-dark
#18b566
error-dark
#dd6161
warning-dark
#f29100
info-dark
#82848a
primary-disabled
#a0cfff
success-disabled
#71d5a1
error-disabled
#fab6b6
warning-disabled
#fcbd71
info-disabled
#c8c9cc
primary-light
#ecf5ff
success-light
#dbf1e1
error-light
#fef0f0
warning-light
#fdf6ec
info-light
#f4f4f5

# 文字颜色

内置的文字颜色有:主要文字、常规文字,次要文字、占位文字颜色,如需更详细的,详见:Color 色彩章节。

main-color
#303133
content-color
#606266
tips-color
#909399
light-color
#c0c4cc

# 边框颜色

uView所有组件边框相关的(特别说明的除外),用的都是这一个颜色。

border-color
#e4e7ed

# 背景颜色

这个颜色是uView推荐的背景色,目前内置组件中使用的场景不多。

bg-color
#f3f4f6

# Input边框颜色

此颜色用于在u-input组件显示边框时的边框颜色。

form-item-border-color
#dcdfe6