vue实现夜间模式
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 中：
import { useDark, useToggle } from '@vueuse/core';
const isDark = useDark({
selector: 'body',
attribute: 'class',
valueDark: 'dark',
valueLight: 'light',
});
const toggle = useToggle(isDark);通过以上方法，可以灵活地在 Vue 应用中实现夜间模式功能。
