夜间模式需DOM属性、localStorage、<meta name="color-scheme">三者同步初始化，唯一可靠解法是在<head>顶部内联脚本预设data-theme并兜底样式，禁用class防冲突，CSS须带html前缀，按钮状态与theme值显式同步，优先级为用户选择＞系统偏好＞时间逻辑，且必须同步meta与CSS作用域。
夜间模式不是加个 class 就完事，关键在于第一次渲染就对——否则必然闪白底。核心是三件事同步：DOM 属性、localStorage、<meta name="color-scheme">，缺一不可。
如何避免 FOUC（页面闪白）
闪屏本质是 CSS 还没生效，JS 却晚一步操作 DOM。唯一可靠解法是把初始化逻辑塞进 <head> 的内联 <script> 里，在任何 <link rel="stylesheet"> 加载前就设置好 data-theme。
- 在
<head>最顶部写内联脚本，读localStorage.getItem('theme')，无值则查window.matchMedia('(prefers-color-scheme: dark)').matches - 立刻执行
document.documentElement.dataset.theme = savedTheme || fallback - CSS 中用
html:not([data-theme]) { background: #fff; }做兜底，确保未 JS 执行前也有基础样式
为什么必须用 data-theme 而不是 class="dark"
class 容易被其他框架或组件复用污染，比如 Tailwind 的 dark: 前缀、BEM 的 block--dark，或第三方库自带的 dark class。一旦冲突，样式就漏切。
- JS 设置统一用
document.documentElement.dataset.theme = 'dark'（设空字符串可清空） - CSS 选择器必须带
html前缀：html[data-theme="dark"] { --bg-primary: #121212; }，否则子元素可能覆盖根级变量 - 别写
.dark .btn这种依赖层级的规则，它无法保证所有按钮都被命中
切换按钮怎么保持状态同步
按钮文案、aria-pressed、图标状态，必须和真实 theme 值一致——不能只靠 class 名判断，因为 class 可能滞后于 dataset.theme 更新。
立即学习“前端免费学习笔记（深入）”；
- 每次切换后，显式更新：
btn.textContent = currentTheme === 'dark' ? '切换到日间' : '切换到夜间' - 同步
btn.setAttribute('aria-pressed', currentTheme === 'dark')，供屏幕阅读器识别 - 记得同时改
document.querySelector('meta[name="color-scheme"]').content = 'light dark'，否则 Safari/Chrome 地址栏、输入框边框颜色不匹配
系统偏好、用户选择、时间逻辑怎么共存
三者优先级必须明确：用户手动选过（localStorage 有值）→ 永远以用户为准；没选过 → fallback 到系统偏好；时间逻辑（如 18–6 点）应视为可选开关，且需单独控制，不能干扰主流程。
- 不要用
new Date().getHours()直接驱动主题，设备时区不准或时间未校准会导致错乱 - 若真要加时间逻辑，建议封装成独立开关，并设状态标识如
themeMode: 'time' | 'auto' | 'manual' -
matchMedia('(prefers-color-scheme: dark)')只用于初始化或监听系统变更，监听回调里别直接切主题，除非你明确要“跟随系统”
最易被忽略的是 <meta name="color-scheme"> 同步和 html 前缀的 CSS 选择器——前者影响浏览器 UI 颜色，后者决定变量是否生效，漏掉任一，夜间模式就算“看起来正常”，实际也已残缺。
