用 watcheffect 实现暗黑模式自动切换，通过 ref 响应式驱动 document.documentelement 的 dark class 更新，结合 css 变量与 localstorage 持久化，并在 html head 中内联基础样式防 fouc。
用 watchEffect 实现暗黑模式的自动根节点切换，核心是让 JS 响应式状态变化直接驱动 document.documentElement 的 class 或属性更新，无需手动监听、无额外副作用逻辑。它天然适合主题这种“一变全变”的场景。
监听暗色状态并同步挂载 class
把暗色开关定义为 ref，watchEffect 会自动追踪它，并在值变化时执行 DOM 更新：
- 给
html元素添加或移除darkclass（推荐方式，语义清晰、CSS 权重可控） - 不操作
body—— 根节点才是 CSS 变量和媒体查询生效的正确锚点 - 确保样式中用
html.dark而非.dark单独类，避免全局污染
配合 CSS 变量实现样式自动响应
CSS 层只需两段规则，完全解耦 JS：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
-
:root下定义浅色变量（默认主题） -
html.dark下覆盖同名变量（深色值），例如：html.dark { --bg-color: #1e1e1e; --text-color: #e2e8f0; } - 组件内直接用
var(--bg-color)，无需重复写媒体查询或条件 class
持久化 + 初始化一次到位
watchEffect 本身不负责初始化，但可以和 localStorage 结合，在 setup 阶段读取并设初始值：
- 从
localStorage.getItem('theme')读取上次选择，设为ref初始值 - 在
watchEffect内部同步写入 localStorage，保证刷新不丢失 - 若需跟随系统偏好，可在初始化时用
window.matchMedia('(prefers-color-scheme: dark)')回退判断
避免 FOUC（首屏闪烁）的关键细节
用户打开页面瞬间，CSS 变量还没加载完成，可能闪一下白底。解决方法：
- 在
index.html的中，用内联 style 提前写一个基础htmlclass：<style>html { background: #fff; color: #333; } html.dark { background: #121212; color: #fff; }</style> - 或服务端渲染时根据请求头或 cookie 注入对应 class
- 不依赖 JS 执行后再配色，从第一帧就稳住视觉基调
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
