当前位置：首页 > VUE

vue暗黑模式实现

2026-02-17 14:22:19VUE

暗黑模式的基本实现

在Vue项目中实现暗黑模式，可以通过CSS变量和Vue的状态管理结合实现。定义一个全局的CSS变量来切换主题颜色，使用Vue的响应式特性动态更新这些变量。

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

.dark-mode {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
}

在Vue组件中，通过动态切换类名来应用暗黑模式：

<template>
  <div :class="{ 'dark-mode': isDarkMode }">
    <button @click="toggleDarkMode">Toggle Dark Mode</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDarkMode: false
    };
  },
  methods: {
    toggleDarkMode() {
      this.isDarkMode = !this.isDarkMode;
    }
  }
};
</script>

使用Vuex管理状态

如果项目中使用Vuex，可以将暗黑模式的状态集中管理，便于全局共享和持久化。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    isDarkMode: false
  },
  mutations: {
    toggleDarkMode(state) {
      state.isDarkMode = !state.isDarkMode;
    }
  },
  actions: {
    toggleDarkMode({ commit }) {
      commit('toggleDarkMode');
    }
  }
});

在组件中通过Vuex的mapState和mapActions来使用：

vue暗黑模式实现

<template>
  <div :class="{ 'dark-mode': isDarkMode }">
    <button @click="toggleDarkMode">Toggle Dark Mode</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['isDarkMode'])
  },
  methods: {
    ...mapActions(['toggleDarkMode'])
  }
};
</script>

持久化存储

为了在页面刷新后保持暗黑模式的状态，可以使用localStorage或sessionStorage存储用户的选择。

// store.js
export default new Vuex.Store({
  state: {
    isDarkMode: localStorage.getItem('isDarkMode') === 'true'
  },
  mutations: {
    toggleDarkMode(state) {
      state.isDarkMode = !state.isDarkMode;
      localStorage.setItem('isDarkMode', state.isDarkMode);
    }
  }
});

响应系统主题

通过window.matchMedia监听系统的主题偏好，自动切换暗黑模式。

vue暗黑模式实现

// 在Vue应用的入口文件中
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

darkModeMediaQuery.addListener((e) => {
  store.commit('setDarkMode', e.matches);
});

// 初始化时检查系统主题
if (darkModeMediaQuery.matches) {
  store.commit('setDarkMode', true);
}

使用第三方库

如果需要更复杂的功能，可以使用第三方库如vue-dark-mode或vuetify（内置暗黑模式支持）。

npm install vue-dark-mode

在Vue项目中使用：

import VueDarkMode from 'vue-dark-mode';
Vue.use(VueDarkMode);

样式优化

暗黑模式不仅需要切换背景和文字颜色，还需要调整其他元素的颜色以确保一致性和可读性。

.dark-mode {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
  --primary-color: #4a90e2;
  --border-color: #333333;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

button {
  background-color: var(--primary-color);
  border: 1px solid var(--border-color);
}