# 自定义主题
uView目前可以自定主题色,字体颜色,边框颜色等,所有组件内部的样式,都基于同一套主题,比如您修改了primary
主题色,所有用到了primary
颜色
的组件都会受影响。
# 教程
- 可以在打开的颜色拾取器中输入或者选择颜色,再点"确定"按钮即可。
- 颜色配置完后,在页面底部下载文件,会得到一个名为
uview.theme.scss
的文件。 - 将文件复制到项目的公共目录(视情况而定)中,再在项目根目录的
uni.scss
中引入即可。 - 删除
uni.scss
文件中原来引入的@import 'uview-ui/theme.scss';
(旧的内置主题文件引入语句)。 - 重新编译项目或者重启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