vue暗黑模式实现
实现 Vue 暗黑模式的方法
使用 CSS 变量和类切换
通过 CSS 变量定义主题颜色，动态切换类名实现暗黑模式。在 App.vue 或根组件中添加类名切换逻辑：
// 在 Vue 组件中
data() {
return {
isDark: false
}
},
methods: {
toggleDarkMode() {
this.isDark = !this.isDark;
document.documentElement.classList.toggle('dark', this.isDark);
}
}CSS 定义变量和暗黑模式样式：
:root {
--bg-color: #ffffff;
--text-color: #333333;
}
.dark {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}结合 Vuex 或 Pinia 状态管理
若需全局状态管理，可使用 Vuex 或 Pinia 存储暗黑模式状态：
// Pinia 示例
import { defineStore } from 'pinia';
export const useThemeStore = defineStore('theme', {
state: () => ({ isDark: false }),
actions: {
toggleTheme() {
this.isDark = !this.isDark;
document.documentElement.classList.toggle('dark', this.isDark);
}
}
});使用第三方库
借助现成库如 vue-dark-mode 或 @vueuse/core 的 useDark 快速实现：
// 使用 @vueuse/core
import { useDark, useToggle } from '@vueuse/core';
const isDark = useDark();
const toggleDark = useToggle(isDark);持久化存储
通过 localStorage 保存用户偏好，避免刷新后重置：
// 在状态管理或组件中
if (localStorage.getItem('darkMode') === 'true') {
document.documentElement.classList.add('dark');
}
// 切换时同步更新
localStorage.setItem('darkMode', this.isDark.toString());响应系统偏好
检测用户系统是否开启暗色模式，自动适配：
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
if (prefersDark.matches) {
document.documentElement.classList.add('dark');
}
prefersDark.addEventListener('change', (e) => {
document.documentElement.classList.toggle('dark', e.matches);
});注意事项
- 过渡动画：添加 CSS 过渡效果提升体验：
* { transition: background-color 0.3s, color 0.3s; } - 图标适配：使用动态图标或 SVG 切换颜色。
- 测试覆盖：确保暗黑模式下所有组件颜色对比度符合可访问性标准。
