uniapp一键换色

需求 :

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

实现 :

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.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变量

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