uniapp一键换色

需求 :

在我们现有项目基础上, 把原来的颜色替换成另一个颜色, 同时需要为下一个项目预留出来随时更换主题色, 实现一键换色

实现 :

1. 介绍

兼容不同项目对主题色及图标的需求

主要通过以下对css颜色和icon主题色图标两个模块的切换

  1. scss/less的css变量
  2. config/index.js中的projectId及config.mainColor
  3. uni.scss 中的 $uni-color-primary

2. 代码

📙 2.1 css颜色

2.1.1 使用scss变量定义颜色

/common/common.scss

定义主色调与副色调等其他公用同色系scss变量

❗❗注意 : 编写代码时, 遇到主题色系颜色, 不要直接写死, 比如 background: #FBF4E4; 应写成 background: $jl-main-color;

复制代码
    2.1.2 使用config/index.js中的config.mainColor定义颜色(作用于js上)
    /config/index.js
    定义主色调与副色调等其他公用同色系scss变量 : 部分情况中, 需要通过js逻辑定义或控制颜色的变化, 需要在template及script中引用到主题色系, 因此在config/index.js 中引入使用
    ❗❗注意 : 编写js代码时, 遇到主题色系, 不要写死颜色, 比如 this.activeColor = '#FBF4E4', 应写成  this.activeColor = this.config.mainActiveColor

    2.1.3 /uni.scss 替换 $uni-color-primary
    ❗❗uniapp插件主题色会默认引用/uni.scss $uni-color-primary, 因此颜色更换及打包时同步需把此处颜色更换

📙 2.2 图标
    2.2.1 使用config/index.js中的projectId作为图标目录的切换
    打包时切换projectId , 并确保static/pic 有此目录
    ❗❗注意 : 编写代码时, 遇到主题色系图标, 不要直接写死, 比如 <image  src="/static/pic/youning/wifi1.png"></image>, 应写成 <image :src="`/static/pic/${projectId}/wifi1.png`"></image>
    背景图也不要在style标签中定义, 因为style标签中无法使用js变量

3. 注意点

❗❗注意 : 编写代码时, 遇到主题色系颜色, 不要直接写死, 比如 background: #FBF4E4; 应写成 background: KaTeX parse error: Expected 'EOF', got '#' at position 71: ...activeColor = '#̲FBF4E4', 应写成 t...{projectId}/wifi1.png`">

背景图也不要在style标签中定义, 因为style标签中无法使用js变量

🙇总之, 遇到主题色系相关的颜色和图标, 切记不要写死!

相关推荐
脑袋大大的1 小时前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君011 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie2 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20152 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦3 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆3 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding4 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui