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），不能在异步回调里调用