描述

最近在完成一个简易后台管理系统的搭建，因为功能模块比较少，于是写了一个设置页面，想给整个web添加一个改变颜色的功能（只是切换一种或几种颜色，自定义改变颜色的话难度会麻烦一些，可以参考下最下方的链接），于是了解了一下css变量和less变量，打算从这俩方面入手（预编译用的less）

	//Css设置变量
	:root{--global-color:blue;}
	//调用变量
	#box1{color:var(--global-color);}

	//Less设置变量
	@link-color: #428bca;
	//调用变量
	#box1{color:@link-color}
}

因为css中有十几行设置背景颜色的代码，每一行都要写var(- -xxx )，（为了省下一些字）于是选中了使用less变量。

解决方法

首先创建一个index.css
（需要在main.js中声明import './styles/index.css',我的样式文件都存在styles中），然后写好两个不同的类，存放要原先颜色和改变之后的颜色。

	//这里是css变量设置
	.theme001 {
        --originColor: #FFCCCC;
        --darkColor: #ff6767a5;
    }
    .theme002 {
        --originColor: #83eeffd0;
        --darkColor: #42929f;
    }

然后创建一个index.less
（使用less需要先安装几个包和一些声明，在文章末尾）

//导入index.css文件
@import "index.css";
//调用刚刚写好的css变量
@origin-Color:var(--originColor);
@dark-Color: var(--darkColor);
@light-Color: var(--lightColor);

最后切换的代码

//*****blackmode是用于判断的布尔值*****
 modechaneg() {
      if (this.blackmode) {
        document.body.className = "theme001";
      }
      else {
        document.body.className = "theme002"
      }

参考文章写的是

document.getElementById('app').className = "theme001"
//或者 document.getElementById('app').className = "theme001"

原因是这样的，我使用了vue+elementUI，vue框架运行的时候都是基于<div id="app"> </div>,但是elementUI框架的一些弹出框是不在这个div内的，所以改变整个网页颜色的时候需要选中整个<body>
（改elementUI的样式简直不要太折磨，后续再补充记录下）
，具体代码如下图

在这里插入图片描述

less安装和使用

首先是安装依赖/包
npm install less less-loader --save-dev
安装完成在package.json中查看
在这里插入图片描述
然后在根目录下创建vue.config.js配置文件重新运行就可以使用less了，
这样就不需要在每个.vue中单独引入@import "../styles/index.less";

module.exports = {
    css: {
        loaderOptions: {
            less: {
                globalVars: {
                    hack: `true; @import '~@/styles/index.less';`
                }
            }
        }
    }
};

文章参考
使用 css/less 动态更换主题色（换肤功能）
vue less 切换主题（皮肤）

原文链接：https://blog.csdn.net/weixin_46835329/article/details/120595088