admin 管理员组文章数量: 1086866
vue2自定义切换主题 dark暗黑主题（暗黑模式）
前言
业务要求要做一个主题色切换，类似于暗黑模式，以前没有做过于是在网络上搜罗现成的解决方案，由于是vue2的项目，找了很久都没有找到一个好的方便的解决方案，最后在github找到一个使用css3的解决方案，觉得十分不错，也很简单明了，于是就拿来直接用了，参考的github项目地址：，可以参考这位的项目结构
代码步骤
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） --><linkid="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-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><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.$storemit("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.$storemit("getTheme"); /*加载上次退出是选择的主题*/}
};
</script>
<style>
* {transition: all 0.2s ease-out; /*加上过渡使主题转换更加自然 */
}
.el-input__inner {transition: all 0.2s ease-out; /*必须单独添加，不然el-input的组件过渡效果不能生效*/
}
</style>
完成😀最后贴一张项目结构图
本文标签： vue2自定义切换主题 dark暗黑主题（暗黑模式）
版权声明：本文标题：vue2自定义切换主题 dark暗黑主题（暗黑模式） 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1693764936a241507.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论