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