【 Vue 】暗黑模式切换_开发网页 切黑暗模式

暗黑模式

基本结构

使用的是elementUi里面的Switch 开关
view / Home.vue

<template>
<div class="toogle">
	<el-switch
		// 绑定的是Boolean值
		v-model="toggleTheme"
		active-color="#3B73F0"
		inactive-color="#DDDFE4"
		active-text="暗黑模式"
		inactive-text="白天模式"
		@change="change"
	>
	</el-switch>
</div>
</template>

<script>
export default{
	data(){
		return {
		  // 存放控制模式切换的Boolean值
		  toggleTheme: false,
		}
	},
	methods:{
		// 将获取到的存放模式切换的值存储到vuex里面
		change() {
	        this.$store.dispatch("chengeThemeActions", this.toggleTheme);
	    },
	}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

vuex / store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 保存切换暗黑模式
    darkTheme: ""
  },
  getters: {
    dark: state => state.darkTheme
  },
  mutations: {
    changeThemeMutations(state, payload) {
      state.darkTheme = payload
    }
  },
  actions: {
  	// 使用commit触发mutations里面的方法
    chengeThemeActions(context, params) {
      context.commit('changeThemeMutations', params)
    }
  },
  modules: {
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

App.vue

<template>
  // 动态绑定类
  <div id="app" :class="{ dark: darkTheme }">
    <router-view />
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "App",
  data() {
    return {
      isShowDarkTheme: "",
    };
  },
  computed: {
    ...mapState(["darkTheme"]),
  },
};
</script>

<style lang="less" scoped>
.dark {
  transition: all 0.5s ease;
  background-color: #000;
  color: #fff;
}
.light {
  transition: all 0.5s ease;
  background-color: #fff;
  color: #000;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

切换效果展示

白天模式

黑夜模式