当前位置：首页 > VUE

vue实现夜间模式

2026-03-10 02:32:42VUE

Vue 实现夜间模式的方法

使用 CSS 变量和动态类名

在 Vue 中实现夜间模式可以通过 CSS 变量和动态类名切换来实现。定义一个夜间模式的 CSS 类，通过 Vue 的数据绑定动态切换类名。

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

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

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

在 Vue 组件中，通过数据绑定切换类名：

<template>
  <div :class="{ 'dark-mode': isDarkMode }">
    <button @click="toggleDarkMode">切换夜间模式</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;
    }
  }
});

在组件中使用：

<template>
  <div :class="{ 'dark-mode': $store.state.isDarkMode }">
    <button @click="toggleDarkMode">切换夜间模式</button>
  </div>
</template>

<script>
export default {
  methods: {
    toggleDarkMode() {
      this.$store.commit('toggleDarkMode');
    }
  }
}
</script>

使用第三方库

可以使用第三方库如 vue-dark-mode 或 vue-use 中的 useDark 组合式 API 快速实现夜间模式。

<template>
  <div :class="{ 'dark': isDark }">
    <button @click="toggle">切换夜间模式</button>
  </div>
</template>

<script>
import { useDark, useToggle } from '@vueuse/core';

export default {
  setup() {
    const isDark = useDark();
    const toggle = useToggle(isDark);
    return { isDark, toggle };
  }
}
</script>

持久化存储

为了保持用户选择的夜间模式状态，可以使用 localStorage 持久化存储。

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

或者在组合式 API 中：

import { useDark, useToggle } from '@vueuse/core';

const isDark = useDark({
  storageKey: 'darkMode'
});
const toggle = useToggle(isDark);

响应系统主题

可以根据用户系统的主题偏好自动切换夜间模式。

// 检测系统主题偏好
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const isDark = ref(prefersDark);

或者在 vue-use 中：

vue实现夜间模式

import { useDark, useToggle } from '@vueuse/core';

const isDark = useDark({
  selector: 'body',
  attribute: 'class',
  valueDark: 'dark',
  valueLight: 'light',
});
const toggle = useToggle(isDark);

通过以上方法，可以灵活地在 Vue 应用中实现夜间模式功能。