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

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

相关推荐
gnip11 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫12 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel13 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼13 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手17 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法17 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku17 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode17 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu17 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu17 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript