将 dark 类加在 标签上是最稳定方式，因其确保 dark: 修饰符全局生效、避免背景割裂、支持 SSR 防 FOUC，并需配合 localStorage 持久化与系统偏好 fallback。
直接在 标签上切 class 是最稳定、最可控的深色模式落地方式，但必须配合 localStorage 持久化 + 系统偏好 fallback，否则刷新就丢状态。
为什么必须把 dark 类加在
因为 Tailwind 的 dark: 修饰符默认依赖祖先元素是否有 dark 类——它从最近的带 dark 的父级开始查找。如果只加在 ，而 没有，那某些全局样式（比如 html { background-color }）或伪元素（如 ::before 在根上的应用）就无法响应。
更关键的是：页面内容高度不足时， 的背景会暴露在视口底部；若它没被标记为 dark，就会固执地显示白色，和深色内容形成割裂。
-
能确保所有 CSS 作用域（包括 :root 变量、伪元素、全屏覆盖层）都收到统一信号 - 加在
上，的背景、滚动条颜色、color-scheme声明等仍可能失效 - Svelte / React 等框架的 SSR 渲染中，
是静态入口，必须提前注入 class 才能避免 FOUC（闪白）
classList.toggle() 切换时，为什么页面会闪一下？
不是 JS 切得慢，而是 CSS 还没准备好：如果只靠 JS 动态加 dark 类，但没在初始 HTML 中预设 class，浏览器首次渲染时会按浅色模式画一遍，JS 执行后再重绘一次——这就是闪屏。
- 服务端或构建时需根据用户上次选择（或系统偏好）预设
或 - 前端 JS 初始化时，先读
localStorage.getItem('theme')，再决定是否调用document.documentElement.classList.add('dark') - 别用
document.body.classList.toggle('dark')—— 它不触发dark:修饰符对根级样式的控制
怎么让
Tailwind 默认不给 设背景色，所以即使加了 dark 类，它还是透明或浏览器默认白底。你得显式定义：
:root {
--bg: #ffffff;
}
.dark {
--bg: #121212;
}
html {
background-color: var(--bg);
}
或者用 Tailwind 的 dark:bg-gray-900 直接写在 标签里（前提是启用了 darkMode: 'class'）：
- 务必检查
tailwind.config.js中darkMode是'class'而非'media'，否则dark:bg-不生效 - 如果用了
darkMode: 'media'，那就不能靠 class 切换，得改用@media (prefers-color-scheme: dark)单独写html样式 - OLED 屏幕用户对纯黑
#000敏感，建议用#121212或#1a1a1a替代
用户手动切换后，系统偏好变化还会覆盖当前选择吗？
不会自动覆盖——只要你用了 darkMode: 'class' 并把状态存在 localStorage 里。但有个容易被忽略的细节：你得主动监听系统变化，并只在用户没手动设置过时才响应。
否则会出现“用户刚切到深色，结果 macOS 设置一改，页面又跳回浅色”的情况。
- 用
window.matchMedia('(prefers-color-scheme: dark)')监听系统变更 - 仅当
localStorage.getItem('theme') === null时，才根据媒体查询结果更新的 class - 用户点按钮切换时，必须同时执行：
localStorage.setItem('theme', 'dark')+document.documentElement.classList.add('dark')
最常漏掉的是「首次加载时判断 localStorage 是否为空」——这会导致用户第一次访问页面时，系统偏好直接覆盖了你的默认主题逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
