vue + less 实现动态主题换肤功能
文章目录
- 前言
- 一、前提条件
- 1. 初始化vue项目
- 2. 安装插件
- 二、新建文件夹主题theme
- 1.style.less文件
- 2.model.js文件
- 3.theme.js文件
- theme文件夹最终效果
- 三、修改vue.config.js文件
- 四、页面上的具体使用
- 1. index.vue 页面
- 2. index.vue 页面注意点说明
- 3. index.vue 效果
- 五、在js中使用定义的颜色变量
- 1. 代码
- 2. 代码说明
- 3. 打印themsColor
- 六、关于定义颜色的变量不是十六进制的原因
前言
在vue项目中(我的是2.6.11版本的)使用less做到切换主题肤色。话不多说,直接开始。
一、前提条件
1. 初始化vue项目
我这里的项目是2.6.11版本的
"vue": "^2.6.11",
2. 安装插件
安装一些less的插件
npm install less --save // less插件
npm install less-loader@5.0.0 --save // less-loader作用就是将less代码转译为浏览器可以识别的CSS代码。
npm install style-resources-loader -D // 在样式引入时,对于变量的引入,需要在每个文件里都要引入一遍,为了避免每次使用时都需要单独引入一遍的问题,采用了 style-resources-loader
二、新建文件夹主题theme
路径:
src > assets > style > theme
翻译:theme 的中文就是主题
注意点:考虑到切换样式也是样式中的,所以放在style里面,当然,你可以放在任意位置,只要你后面的路径同一改了就好。
1.style.less文件
// 默认的主题颜色(白低黑字)
@baseColor: var(--baseColor, rgba(25,121,255));
@pageBgColor: var(--pageBgColor, rgba(255,255,255));
@scrollBgColor: var(--scrollBgColor, rgba(0, 0, 0));
@resultBgColor: var(--resultBgColor, rgba(255,192,203));
@resultBorderColor: var(--resultBorderColor, rgba(255,255,0));
@resultTextColor: var(--resultTextColor, rgba(0,0,0, 0.9));// 导出变量 (如果在 src/assets/style/theme/model文件中配置了,就直接导出里面的字体使用)
:export {name: "less";baseColor: @baseColor;pageBgColor: @pageBgColor;scrollBgColor: @scrollBgColor;resultBgColor: @resultBgColor;resultBorderColor: @resultBorderColor;resultTextColor: @resultTextColor;
}
2.model.js文件
// 一套默认主题以及一套暗黑主题
export const themes = {default: {baseColor: `${25}, ${121},${255}`, // 基色(无变化) pageBgColor: `${255}, ${255},${255}`, // 页面的背景色scrollBgColor: `${0}, ${0},${0}`, // 滚动条的背景色resultBgColor: `${255}, ${192},${203}`, // 结果背景色resultBorderColor: `${255}, ${255},${0}`, // 结果区背景色resultTextColor: `${0}, ${0},${0}, 0.9`, // 结果文字},dark: {baseColor: `${25}, ${121},${255}`, // 基色(无变化) pageBgColor: `${0}, ${0},${0}`, // 页面的背景色scrollBgColor: `${255}, ${255},${255}`, // 滚动条的背景色resultBgColor: `${135}, ${206},${235}`, // 结果背景色resultBorderColor: `${0}, ${128},${0}`, // 结果区背景色resultTextColor: `${255}, ${255},${255}, 0.9`, // 结果文字},
};
3.theme.js文件
import { themes } from "./model";
// 修改页面中的样式变量值
const changeStyle = (obj) => {for (let key in obj) {document.getElementsByTagName("body")[0].style.setProperty(`--${key}`, obj[key]);}
};
// 改变主题的方法
export const setTheme = (themeName) => {localStorage.setItem("theme", themeName); // 保存主题到本地,下次进入使用该主题const themeConfig = themes[themeName] ? themes[themeName] : themes['default'];changeStyle(themeConfig);
};
theme文件夹最终效果

三、修改vue.config.js文件
const path = require('path');
module.exports = {pluginOptions: {"style-resources-loader": {preProcessor: "less",patterns: [// 这个是加上自己的路径,不能使用(如下:alias)中配置的别名路径path.resolve(__dirname, "./src/assets/style/theme/style.less"),],},},
};
注意: 修改vue.config.js文件 记得重新启动项目。
四、页面上的具体使用
1. index.vue 页面
<template><div class="index"><button class="btn" @click="themeDefault">默认</button><button class="btn" @click="themeDark">暗黑</button><div class="content">这是一个可以切换主题的盒子</div> </div>
</template><script>
import { setTheme } from "../assets/style/theme/theme"; // 引入切换主题方法
export default {data() {return {}},methods: {// 默认主题方案(白底黑字)themeDefault() {document.documentElement.removeAttribute('theme-mode'); // 重置为浅色模式this.themeChange = true;setTheme("default"); // 初始化未默认主题},// 暗黑主题(黑底白字)themeDark() {document.documentElement.setAttribute('theme-mode', 'dark'); // 重置为深色模式this.themeChange = false;setTheme("dark");},},mounted: function() {this.themeDefault(); // 进入页面默认渲染默认主题方案}
}
</script><style lang="less" scoped>
@import '../assets/style/theme/style.less'; // 引入主题样式文件.index{width: 100%;height: 100%;.btn {width: 50px;height: 30px;background-color: green;}.content {width: 100px;height: 100px;color: rgba(@resultTextColor, 1);background-color: rgba(@resultBgColor, 1);border: 10px solid rgba(@resultBorderColor, 1);}
}
</style>
2. index.vue 页面注意点说明

3. index.vue 效果
(1)默认效果

(2)暗黑效果

其他校验修改主题成功的方法
在审查元素的body上有你所定义的数据就是了
五、在js中使用定义的颜色变量
1. 代码
import themsColor from '../assets/style/theme/style.less'; // 引入主题样式文件
export default {data() {return {themsColor,}},mounted: function() {console.log('themsColor', themsColor);}
}
2. 代码说明

3. 打印themsColor

六、关于定义颜色的变量不是十六进制的原因
如果你在modes.js中使用 #ffffff #333333 类似这样的颜色,其实也是可以的,而且在页面中可以直接使用
color: @resultTextColor,看过去似乎简单了很多,那为什么要改用rgb的方式呢?
相信有仔细注意代码的人可能注意到了这个颜色的值${255}, ${255},${255}, 0.9, 是的,透明度。
如果直接写死的十六进制的话,没有可以操作的空间。包括我实际项目最开始用的也是十六进制,后面才改成的rgb的方式。不仅仅是文字,包括颜色中也会有禁用等需要直接修改透明度的方法,不用因此再添加一个类似的变量考虑才使用的rgba的方法。当然,这也仅仅是一种思路。如果你有更好的方法可以忽略。
注意点:有透明度的就和颜色一样,加在后面就好了,没有透明度的话,就在后面加上1,不然可能没效果。
相关文章:
vue + less 实现动态主题换肤功能
文章目录 前言一、前提条件1. 初始化vue项目2. 安装插件 二、新建文件夹主题theme1.style.less文件2.model.js文件3.theme.js文件theme文件夹最终效果 三、修改vue.config.js文件四、页面上的具体使用1. index.vue 页面2. index.vue 页面注意点说明3. index.vue 效果 五、在js中…...
matlab使用教程(15)—图论基础
1.有向图和无向图 1.1什么是图? 图是表示各种关系的节点和边的集合: • 节点 是与对象对应的顶点。 • 边 是对象之间的连接。 • 图的边有时会有权重 ,表示节点之间的每个连接的强度(或一些其他属性)。 这些定…...
【量化课程】02_4.数理统计的基本概念
2.4_数理统计的基本概念 数理统计思维导图 更多详细内容见notebook 1.基本概念 总体:研究对象的全体,它是一个随机变量,用 X X X表示。 个体:组成总体的每个基本元素。 简单随机样本:来自总体 X X X的 n n n个相互…...
【计算机视觉|生成对抗】改进的生成对抗网络(GANs)训练技术
本系列博文为深度学习/计算机视觉论文笔记,转载请注明出处 标题:Improved Techniques for Training GANs 链接:[1606.03498v1] Improved Techniques for Training GANs (arxiv.org) 摘要 本文介绍了一系列应用于生成对抗网络(G…...
SQLyog中导入CSV文件入库到MySQL中
1.在数据库中新建一个表,设置列名(与待导入文件一致),字段可以多出几个都可以 2.右键表名,导入- - >导入使用本地加载的CSV数据 选择使用加载本地CVS数据 3.指定好转义字符,将终止设置为,号(英文状态下…...
Spring Security6 最新版配置该怎么写,该如何实现动态权限管理
Spring Security 在最近几个版本中配置的写法都有一些变化,很多常见的方法都废弃了,并且将在未来的 Spring Security7 中移除,因此又补充了一些新的内容,重新发一下,供各位使用 Spring Security 的小伙伴们参考。 接下…...
CommandLineRunner 和 ApplicationRunner 用于Spring Boot 应用启动后执行特定逻辑
CommandLineRunner 和 ApplicationRunner 都是 Spring Boot 中用于在应用启动后执行特定逻辑的接口。它们的主要区别在于传递的参数类型和执行顺序。下面我将为您详细解释它们的用途、使用案例以及执行顺序。 CommandLineRunner CommandLineRunner 是一个接口,它有…...
一、Dubbo 简介与架构
一、Dubbo 简介与架构 1.1 应用架构演进过程 单体应用:JEE、MVC分布式应用:SOA、微服务化 1.2 Dubbo 简介一种分布式 RPC 框架,对专业知识(序列化/反序列化、网络、多线程、设计模式、性能优化等)进行了更高层的抽象和…...
软考:中级软件设计师:文件管理,索引文件结构,树型文件结构,位示图,数据传输方式,微内核
软考:中级软件设计师: 提示:系列被面试官问的问题,我自己当时不会,所以下来自己复盘一下,认真学习和总结,以应对未来更多的可能性 关于互联网大厂的笔试面试,都是需要细心准备的 (1…...
实践-CNN卷积层
实践-CNN卷积层 1 卷积层构造2 整体流程3 BatchNormalization效果4 参数对比5 测试效果 1 卷积层构造 2 整体流程 根据网络结构来写就可以了。 池化 拉平 训练一个网络需要2-3天的时间。用经典网络来,一些细节没有必要去扣。 损失函数: fit模型&…...
【设计模式】MVC 模式
MVC 模式代表 Model-View-Controller(模型-视图-控制器) 模式。这种模式用于应用程序的分层开发。 Model(模型) - 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑,在数据变化时更新控制器。Viewÿ…...
看康师傅金桔柠檬X国漫IP跨界出圈,打开IP合作新思路
Z世代年轻群体已经成为消费主力,其喜好和消费观念也呈现出全新态势。抓住年轻人的心,就是抓住了品牌未来的战场。 那么到底什么样的营销动作才能真正撬动年轻人? 对于互联网时代成长起来的Z世代年轻人来说,人气二次元IP无疑是能最…...
ElementUI的MessageBox的按钮置灰且不可点击
// this.$confirmthis.$alert(这是一段内容, 标题名称, {confirmButtonText: 确定,confirmButtonCLass: confirmButton,beforeClose: (action,instance,done) > {if (action confirm) {return false} else {done()}});}.confirmButton {background: #ccc !important;cursor…...
pc端与flutter通信失效, Method not found
报错情况描述:pc端与flutter通信,ios端能实现通信,安卓端通信报错 报错通信代码: //app消息通知window.callbackName function (res) {window?.jsBridge && window.jsBridge?.postMessage(JSON.stringify(res), "…...
linux 防火墙经常使用的命令
# 开启防火墙服务 systemctl start firewalld # 关闭防火墙服务 systemctl stop firewalld # 重启防火墙服务 systemctl restart firewalld # 开发端口 firewall-cmd --zonepublic --add-port8080/tcp --permanent # 移除端口 firewall-cmd --zonepublic --remove-port8080/tc…...
Docker desktop安装mysql
首先本地已经有 docker 环境存在,然后可以拉取 MySQL 镜像。 相关 mysql 仓库地址: https://hub.docker.com/_/mysql/ # 镜像拉取 docker pull mysql:8.0.26docker pull mysql:latest# 查看镜像列表docker image ls等待镜像完成之后就可以启动 mysql 了…...
Java SpringBoot Vue ERP系统
系统介绍 该ERP系统基于SpringBoot框架和SaaS模式,支持多租户,专注进销存财务生产功能。主要模块有零售管理、采购管理、销售管理、仓库管理、财务管理、报表查询、系统管理等。支持预付款、收入支出、仓库调拨、组装拆卸、订单等特色功能。拥有商品库存…...
什么是CSS中的渐变(gradient)?如何使用CSS创建线性渐变和径向渐变?
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 渐变(Gradient)在CSS中的应用⭐ 线性渐变(Linear Gradient)语法:示例: ⭐ 径向渐变(Radial Gradient)语法:示例: ⭐ 写…...
【深度学习】PyTorch快速入门
【深度学习】学习PyTorch基础 介绍PyTorch 深度学习框架是一种软件工具,旨在简化和加速构建、训练和部署深度学习模型的过程。深度学习框架提供了一系列的函数、类和工具,用于定义、优化和执行各种深度神经网络模型。这些框架帮助研究人员和开发人员专注…...
学习Vue:组件通信
组件化开发在现代前端开发中是一种关键的方法,它能够将复杂的应用程序拆分为更小、更可管理的独立组件。在Vue.js中,父子组件通信是组件化开发中的重要概念,同时我们还会讨论其他组件间通信的方式。 父子组件通信:Props 和 Events…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向: 逆向设计 通过神经网络快速预测微纳结构的光学响应,替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
VB.net复制Ntag213卡写入UID
本示例使用的发卡器:https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架,支持"一次开发,多端部署",可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务,为旅游应用带来…...
实现弹窗随键盘上移居中
实现弹窗随键盘上移的核心思路 在Android中,可以通过监听键盘的显示和隐藏事件,动态调整弹窗的位置。关键点在于获取键盘高度,并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...
今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
R语言速释制剂QBD解决方案之三
本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...
基于Springboot+Vue的办公管理系统
角色: 管理员、员工 技术: 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能: 该办公管理系统是一个综合性的企业内部管理平台,旨在提升企业运营效率和员工管理水…...
Python 实现 Web 静态服务器(HTTP 协议)
目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1)下载安装包2)配置环境变量3)安装镜像4)node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1)使用 http-server2)详解 …...
写一个shell脚本,把局域网内,把能ping通的IP和不能ping通的IP分类,并保存到两个文本文件里
写一个shell脚本,把局域网内,把能ping通的IP和不能ping通的IP分类,并保存到两个文本文件里 脚本1 #!/bin/bash #定义变量 ip10.1.1 #循环去ping主机的IP for ((i1;i<10;i)) doping -c1 $ip.$i &>/dev/null[ $? -eq 0 ] &&am…...
python打卡第47天
昨天代码中注意力热图的部分顺移至今天 知识点回顾: 热力图 作业:对比不同卷积层热图可视化的结果 def visualize_attention_map(model, test_loader, device, class_names, num_samples3):"""可视化模型的注意力热力图,展示模…...

