前言
业务要求要做一个主题色切换，类似于暗黑模式，以前没有做过于是在网络上搜罗现成的解决方案，由于是vue2的项目，找了很久都没有找到一个好的方便的解决方案，最后在github找到一个使用css3的解决方案，觉得十分不错，也很简单明了，于是就拿来直接用了，参考的github项目地址：https://github.com/LiuyangAce/theme-switch/tree/master，可以参考这位的项目结构
代码步骤
1、建立主题颜色css文件
theme-light.css
/* 颜色变量名字必须以--开头 */:root{--bg-color: #fff;--menu-color: #f1f3f4;--font-color: #333;--border-color: #333;}
theme-dark.css
:root{--bg-color: #141414;--menu-color: #66b1ff;--font-color: #E5EAF3;--border-color: #e5eaf3;}
2、在index.html中先导入默认主题（这里先导入theme-light.css）
index.html
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>air-conditioner</title><!-- 导入默认颜色的css文件（这里是light） --><linkid="theme-link"rel="stylesheet"type="text/css"href="./static/style/theme-light.css"/></head><body><divid="app"></div><!-- built files will be auto injected --></body></html>
3、在项目中css的颜色值取变量
HelloWord.vue
<template><divclass="hello"><divclass="box">
人生若只如初见，何事秋风悲画扇。
</div></div></template><stylescoped>.hello{width: 100vw;height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color:var(--bg-color);/*取背景的颜色变量*/.box{width: 600px;height: 400px;margin: 20px 0;display: flex;justify-content: center;align-items: center;border-radius: 8px;border: 1px solid var(--border-color);/*取边框的颜色变量*/color:var(--font-color);/*取文字的颜色变量*/}}</style>
4、添加button实现主题转换效果
HelloWord.vue
<template><divclass="hello"><button@click="switchTheme">switch</button><divclass="box">
人生若只如初见，何事秋风悲画扇。
</div></div></template><script>exportdefault{name:"HelloWorld",data(){return{theme:'light'};},methods:{switchTheme(){if(this.theme =='light'){
document
.head.querySelector("#theme-link").setAttribute("href","./static/style/theme-dark.css");}else{
document.head
.querySelector("#theme-link").setAttribute("href","./static/style/theme-light.css");}}}};</script>
这里button方法让主题在light和dark之间相互切换，有多个主题时可以自己增加按钮和修改方法逻辑，到这里单文件的主题切换就完成了，要实现项目整体的主题转换还需要借助状态管理工具和LocalStorage，下面演示在第3步的基础上的全局实现
5、全局实现（接3）
1、npm install vuex@next --save，安装vuex后在src下创建文件store/index.js文件并在main.js引用
index.js
import Vue from"vue";import Vuex from"vuex";
Vue.use(Vuex);exportdefaultnewVuex.Store({state:{theme:"light"//状态管理器state中的初始theme值设置为light},mutations:{// 设置切换主题// 设置切换主题setTheme(state, theme){
state.theme = theme;
localStorage.setItem("air-conditioner-theme", theme);
document.head
.querySelector("#theme-link").setAttribute("href",`./static/style/theme-${theme}.css`);},//获取缓存主题getTheme(state){
state.theme = localStorage.getItem("air-conditioner-theme")||"light";
document.head
.querySelector("#theme-link").setAttribute("href",`./static/style/theme-${state.theme}.css`);}}});
2、修改步骤四中的button方法（这里换成el-switch开关）
HelloWord.vue
<template><divclass="hello"><el-switchv-model="theme"active-icon-class="el-icon-moon"active-color="#183153"active-value="dark"inactive-icon-class="el-icon-sunny"inactive-color="#73c0fc"inactive-value="light"@change="switchTheme"></el-switch><el-inputstyle="width: 200px;"v-model="input"placeholder="请输入内容"></el-input><divclass="box">
人生若只如初见，何事秋风悲画扇。
</div></div></template><script>exportdefault{name:"HelloWorld",data(){return{theme: localStorage.getItem("air-conditioner-theme")||"light"，
input:""};//el开关默认选中light值},methods:{switchTheme(theme){this.$store.commit("setTheme", theme);}}};</script>
到这里主题的切换就实现了，若要实现ElementUI组件的主题切换，可在官方文档中的在线主题编辑器或在线主题生成工具中编辑下载，以上面同样的方式引入自己下载好的多套css文件进行风格的切换，index.html中引入后要记得不用再在main.js中引入默认的"element-ui/lib/theme-chalk/index.css"文件了。目前在线主题编辑器官方已经停止维护了，个别需要改变的组件色彩可以在主题css文件中逐个进行修改，下面以修改el-input的输入框底色为例：
theme-light.css
/* 颜色变量名字必须以--开头 */:root{--bg-color: #fff;--menu-color: #f1f3f4;--font-color: #333;--border-color: #333;}/* el输入框的样式 */.el-input__inner{background-color: #fff !important;/*只有加上!important才有效*/}
theme-dark.css
:root{--bg-color: #141414;--menu-color: #66b1ff;--font-color: #E5EAF3;--border-color: #e5eaf3;}/* el输入框的样式 */.el-input__inner{background-color: #141414 !important;/*只有加上!important才有效*/}
可以在App.vue中加入动画过渡使其和主题切换过程更加自然
App.vue
<script>exportdefault{name:"App",created(){this.$store.commit("getTheme");/*加载上次退出是选择的主题*/}};</script><style>*{transition: all 0.2s ease-out;/*加上过渡使主题转换更加自然 */}.el-input__inner{transition: all 0.2s ease-out;/*必须单独添加，不然el-input的组件过渡效果不能生效*/}</style>
完成😀最后贴一张项目结构图
本文转载自: https://blog.csdn.net/qq_36828272/article/details/130506741
版权归原作者 Shana南夏 所有， 如有侵权，请联系我们删除。
版权归原作者 Shana南夏 所有， 如有侵权，请联系我们删除。