需求 :
在我们现有项目基础上, 把原来的颜色替换成另一个颜色, 同时需要为下一个项目预留出来随时更换主题色, 实现一键换色
实现 :
1. 介绍
兼容不同项目对主题色及图标的需求
主要通过以下对css颜色和icon主题色图标两个模块的切换
- scss/less的css变量
- config/index.js中的projectId及config.mainColor
- 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.mainActiveColor2.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变量
🙇总之, 遇到主题色系相关的颜色和图标, 切记不要写死!
