Vue 3 组合式函数封装暗黑模式切换逻辑，通过 ref 管理状态、watchEffect 同步 html class、localStorage 持久化与 usePreferredDark 兼容系统偏好，暴露 isDark 和 toggleDark 接口，可选集成 View Transitions 实现平滑过渡。
Vue 3 组合式函数实现暗黑模式切换的通用逻辑，核心是把“状态管理 + DOM 同步 + 持久化”三件事封装成可复用、无副作用的逻辑单元。它不依赖 UI 库或具体样式方案，只管主题开关本身。
状态响应与 DOM 同步
用 ref 管理当前是否启用暗黑模式，并通过 watchEffect 自动同步到 document.documentElement 的 class 列表中：
- 读取 localStorage 初始化状态（如未设置则 fallback 到系统偏好）
- 监听状态变化，自动添加或移除
dark类（不是body，是html根节点） - 确保 class 操作幂等：
classList.toggle('dark', isDark.value)
持久化与系统偏好兼容
用户选择要记住，但首次加载也应尊重系统设置：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 切换时写入 localStorage，避免刷新丢失
- 初始化时优先检查
localStorage；若为空，再调用usePreferredDark()获取系统偏好 -
usePreferredDark()是基于prefers-color-scheme媒体查询的响应式封装，无需手动监听
暴露简洁的控制接口
对外只提供两个关键能力：
-
isDark：响应式布尔值，可直接用于模板绑定（如
v-model） - toggleDark：切换函数，内部翻转状态，触发所有副作用
可选增强：支持 View Transitions 平滑过渡
在 toggleDark 中加入浏览器兼容判断，提升体验：
- 若支持
document.startViewTransition，包裹状态更新为过渡动画 - 否则走普通 class 切换，自然降级
- 注意：View Transition 必须在用户交互事件中触发（如 click），不能在异步回调里调用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
