返回介绍

开发指南

组件

JS

模板

自定义主题

发布于 2021-04-03 05:35:25 字数 8678 浏览 934 评论 0 收藏 0

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文