前言
业务要求要做一个主题色切换，类似于暗黑模式，以前没有做过于是在网络上搜罗现成的解决方案，由于是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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>air-conditioner</title>
<!-- 导入默认颜色的css文件（这里是light） -->
<link
id="theme-link"
rel="stylesheet"
type="text/css"
href="./static/style/theme-light.css"
/>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
3、在项目中css的颜色值取变量
HelloWord.vue
<template>
<div class="hello">
<div class="box">
人生若只如初见，何事秋风悲画扇。
</div>
</div>
</template>
<style scoped>
.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>
<div class="hello">
<button @click="switchTheme">switch</button>
<div class="box">
人生若只如初见，何事秋风悲画扇。
</div>
</div>
</template>
<script>
export default {
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);
export default new Vuex.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>
<div class="hello">
<el-switch
v-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-input
style="width: 200px;"
v-model="input"
placeholder="请输入内容"
></el-input>
<div class="box">
人生若只如初见，何事秋风悲画扇。
</div>
</div>
</template>
<script>
export default {
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>
export default {
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>
完成😀最后贴一张项目结构图
