当前位置: 首页 > 文档资料 > uView 开发文档 >

自定义主题

优质
小牛编辑
164浏览
2023-12-01

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