更新记录

v1.0.0（2022-01-20）

-uniapp 切换主题

平台兼容性

Vue2 Vue3
√ ×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

Theme 主题切换

主要使用scss与vuex支持uniapp主题切换

使用方法：

①安装

npm install

②使用

template调用示例：

:class="[vtheme,'content']"

scss调用示例：

.content {
    @include base-background();
}

根据主题颜色变化：

随主题色变化颜色 写法
背景色 先调用:class="[vtheme]",然后引入@include base-background();
字体颜色 先调用:class="[vtheme]",然后引入@include text-color();
边框颜色 先调用:class="[vtheme]",然后引入@include border-color();
阴影颜色 先调用:class="[vtheme]",然后引入@include shadow-color();

scss方法：

颜色 值
主题色 default、day、night
行为色 success、warning、error
辅助色 secondery
背景色 bg、bg1、bg2
边框色 bd、bd1、bd2
文字色 th(标题色)、tb(主文本色)、ts(次文本色)、thl(高亮文本色)
方法
color color：color(tb)
disabled color：disabled(th)

scss混入：

混入
font @include font(28); 参数一：文字大小
辅助字：24
正文文字：28
一般粗体高亮强调：32 ，例如：名字
栏目标题：36 ，
页面标题：40
大数字：56或64
参数二：文字加粗（300,500,700,bold等）
radius @include radius(small); 参数一：圆角大小
mini：16rpx（小型元素的圆角，例如小型矩形标签）
small：32rpx（常规尺寸元素的圆角，例如输入框，选项背景框）
middle：56rpx（小型按钮的圆角）
large：80rpx（大型按钮的圆角）
shadow @include shadow(default); 参数一：阴影颜色
主题色：default、day、night
行为色：success、warning、error
辅助色：secondery
背景色：bg、bg1、bg2
边框色：bd、bd1、bd2
文字色：th(标题色)、tb(主文本色)、ts(次文本色)、thl(高亮文本色)

颜色变量：（themeColor）

有时需要在js或者使用style动态设置主题色，可以使用themeColor

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论

暂无用户评论。

插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...