自定义主题
优质
小牛编辑
164浏览
2023-12-01
uView目前可以自定主题色,字体颜色,边框颜色等,所有组件内部的样式,都基于同一套主题,比如您修改了primary
主题色,所有用到了primary
颜色 的组件都会受影响。
教程
- 可以在打开的颜色拾取器中输入或者选择颜色,再点"确定"按钮即可。
- 颜色配置完后,在页面底部下载文件,会得到一个名为
uview.theme.scss
的文件。 - 将文件复制到项目的公共目录(视情况而定)中,再在项目根目录的
uni.scss
中引入即可。 - 删除
uni.scss
文件中原来引入的@import 'uview-ui/theme.scss';
(旧的内置主题文件引入语句)。 - 重新编译项目或者重启HX即可生效。
主题色
目前有五个主题色,每个主题色又分别有对应的light
(淡色)、dark
(深色)、disabled
(禁止状态时的颜色):
文字颜色
内置的文字颜色有:主要文字、常规文字,次要文字、占位文字颜色,如需更详细的,详见:Color 色彩章节。
main-color #303133 content-color #606266 tips-color #909399 light-color #c0c4cc边框颜色
uView所有组件边框相关的(特别说明的除外),用的都是这一个颜色。
border-color #e4e7ed背景颜色
这个颜色是uView推荐的背景色,目前内置组件中使用的场景不多。
bg-color #f3f4f6Input边框颜色
此颜色用于在u-input
组件显示边框时的边框颜色。