当前位置: 首页 > news >正文

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

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

相关文章:

uniapp一键换色

需求 : 在我们现有项目基础上, 把原来的颜色替换成另一个颜色, 同时需要为下一个项目预留出来随时更换主题色, 实现一键换色 实现 : 1. 介绍 兼容不同项目对主题色及图标的需求 主要通过以下对css颜色和icon主题色图标两个模块的切换 scss/less的css变量config/index.js中的…...

动态规划思想案例刨析

动态规划的思想 动态规划解决问题的核心思想是“重叠子问题”和“最优子结构”。 重叠子问题&#xff1a;在复杂问题中&#xff0c;往往存在许多重复的子问题。动态规划通过避免重复计算&#xff0c;将子问题的解保存起来&#xff0c;以便在需要时直接引用&#xff0c;从而提…...

vtk9.3 配置 visual studio 2019 运行环境 和运行实例详解

&#xff08;1&#xff09;包含文件配置&#xff1a; 项目--属性--VC目录&#xff0c;在包含目录中把include文件夹的地址加进去&#xff0c;一直要到下一级 vtk-9.3目录下&#xff0c; 小知识&#xff1a; 在Visual Studio 2019中运行项目时&#xff0c;如果项目中使用了第三…...

腾讯云添加SSL证书

一、进入腾讯云SSL证书&#xff1a; ssl证书控制台地址 选择“我的证书”&#xff0c;点击"申请免费证书" 2、填写域名和邮箱&#xff0c;点击“提交申请” 在此页面中会出现主机记录和记录值。 2、进入云解析 DNS&#xff1a;云解析DNS地址 进入我的解析-记录…...

CentOS下用rpm安装软件时报错error: Failed dependencies

在CentOS下用rpm安装软件时会报如下错误&#xff1a; 1、安装时提示&#xff1a; [rootdb software]# rpm -ivh ksh-20120801-254.el8.x86_64.rpm warning: ksh-20120801-254.el8.x86_64.rpm: Header V3 RSA/SHA256 Signature, key ID 8483c65d: NOKEY error: Failed depende…...

Vue3+Vite连接高德地图JS API——地图显示、输入搜索

1 开通高德地图Web端JS API服务 1、进入高德地图API官网&#xff08;https://lbs.amap.com/&#xff09;&#xff1a; 2、注册登录。 3、进入控制台。 4、点击“应用管理”&#xff0c;点击“我的应用”&#xff0c;创建新应用。 5、添加Key&#xff0c;服务平台选择“Web端&…...

一台java服务器可以跑多少个线程?

一台java服务器可以跑多少个线程&#xff1f; 一台java服务器能跑多少个线程&#xff1f;这个问题来自一次线上报警如下图&#xff0c;超过了我们的配置阈值。 打出jstack文件&#xff0c;通过IBM Thread and Monitor Dump Analyzer for Java工具查看如下&#xff1a; 共计166…...

【Python 千题 —— 基础篇】猜数字小游戏

题目描述 题目描述 猜数字。利用 random 函数随机生成一个1~100之间的数并存储在变量中&#xff0c;然后使用条件判断以及循环方式编写一个猜数字的环节&#xff1a; 如果输入的数字大于随机生成的数字&#xff0c;则输出“猜大了”如果输入的数字小于随机生成的数字&#x…...

Android Media3 ExoPlayer 如何正确设置缓存大小

在播放音视频时&#xff0c;如何开启 Android Media3 ExoPlayer 缓存&#xff0c;请参考笔者另外一篇文章&#xff1a; Android Media3 Exoplayer 开启缓存功能 笔者在设置 ExoPlayer 的缓存大小时&#xff0c;遇到一个非常奇怪的问题&#xff0c;例如&#xff0c;设置最大缓存…...

WPF实现右键选定TreeViewItem

在WPF中&#xff0c;TreeView默认情况是不支持右键选定的&#xff0c;也就是说&#xff0c;当右键点击某节点时&#xff0c;是无法选中该节点的。当我们想在TreeViewItem中实现右键菜单时&#xff0c;往往希望在弹出菜单的同时选中该节点&#xff0c;以使得菜单针对选中的节点生…...

蓝桥杯 java 重复字符串

题目描述 * 如果一个字符串S恰好可以由某个字符串重复K次得到&#xff0c;我们就称S是K次重复字符串。 * 例如 abcabcabc 可以看作是 abc重复3次得到&#xff0c;所以 abcabcabc 是3次重复字符串。 * 同理 aaaaaa 既是2次重复字符串、又是3次重复字符串和6次重复字符串。 * 现在…...

Vue实战:两种方式创建Vue项目

文章目录 一、实战概述二、实战步骤&#xff08;一&#xff09;安装Vue CLI脚手架1、从Node.js官网下载LTS版本2、安装Node.js到指定目录3、配置Node.js环境变量4、查看node版本5、查看npm版本6、安装Vue Cli脚手架7、查看Vue Cli版本 &#xff08;二&#xff09;命令行方式构建…...

不同打包工具下的环境变量配置方式对比

本文作者为 360 奇舞团前端开发工程师 天明 前言 在现代的JavaScript应用程序开发中&#xff0c;环境变量的配置是至关重要的。不同的应用场景和部署环境可能需要不同的配置&#xff0c;例如开发、测试和生产环境。最常见的需求是根据不同的环境&#xff0c;配置如是否开启sour…...

5个99%的人可能不知道的实用程序库!

前言 作为一名前端开发者,这些 JavaScript 库极大地提高了我的工作效率,如格式化日期、处理 URL 参数和调试移动网页。朋友们,我想和你们分享这些库。 1. 使用 “Day.js” 来格式化日期和时间 链接 作为开发者,我已经厌倦了在 JavaScript 中操作日期和时间,因为它太麻烦了。…...

shell脚本,ADB

Linux命令行命令是系统内置的命令或用户自定义的脚本&#xff08;shell 脚本&#xff0c;.sh扩展名结尾&#xff09;&#xff0c;可以通过终端输入命令来执行。这些命令通常存储在Linux系统的/bin、/usr/bin、/sbin、/usr/sbin等目录下&#xff0c;也可以在$PATH环境变量中指定…...

微服务治理:微服务安全详解

微服务安全旨在保护微服务架构中每一个独立的服务。与传统单体应用程序不同&#xff0c;它们在单点应用安全措施&#xff0c;微服务由于其独立性&#xff0c;需要分布式安全方法。 为何关注微服务安全&#xff1f; 攻击面扩大: 更多服务暴露在外&#xff0c;意味着攻击者拥有…...

迅为RK3588开发板编译 Buildroot单独编译图形化界面三

第三步&#xff1a;编译 Recovery 首先在 linux 源码目录下输入以下命令进入编译的 UI 界面&#xff0c;进入之后如下所示&#xff1a; ./build.sh 然后将光标移动到第四个 recovery&#xff0c;点击回车即可开始 recovery 的编译&#xff0c;编译过程如下所示&#xff1a; 编…...

yum仓库及NFS共享

目录 一.yum仓库的基本原理 1.Yum概述&#xff1a; 2.Yum实现过程&#xff1a; 二. yum配置文件及命令&#xff1a; 1. 主配置文件&#xff1a; 2. 仓库设置文件&#xff1a; 3 .日志文件&#xff1a; ​编辑4.yum命令详解&#xff1a; 三. 搭建仓库的方式&#xff1a; …...

【Web】CTFSHOW PHP特性刷题记录(全)

知其然知其所以然&#xff0c;尽量把每种特性都详细讲明白。 目录 web89 web90 web91 web92 web93 web94 web95 web96 web97 web98 web99 web100 web101 web102 web103 web104 web105 web106 web107 web108 web109 web110 web111 web112 web113 web…...

[Docker] Docker为什么出现

Docker为什么出现 一款产品&#xff1a; 开发–上线 -->两套环境 | 应用配置 开发即运维&#xff01; 环境配置十分麻烦&#xff0c;每一个机器都要部署环境&#xff08;Redis, ES, Hadoop&#xff09; 费时费力 项目带上配置环境安装打包。 传统&#xff1a; 开发jar&…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

Python 实现 Web 静态服务器(HTTP 协议)

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...