vue2自定义切换主题 dark暗黑主题（暗黑模式）

Shana南夏

已于 2023-05-05 15:55:13 修改

阅读量3.8k

点赞数 6

分类专栏：前端文章标签： css3 vue.js 前端 javascript html

于 2023-05-05 15:08:04 首次发布

本文链接：https://blog.csdn.net/qq_36828272/article/details/130506741

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

业务要求要做一个主题色切换，类似于暗黑模式，以前没有做过于是在网络上搜罗现成的解决方案，由于是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>