标签页间暗黑模式不同步是因为localStorage变更仅触发storage事件而不自动更新DOM，需手动监听该事件并同步更新document.documentElement.dataset.theme及CSS变量。
标签页之间无法自动同步暗黑模式状态，localStorage 变更不会触发当前页的重绘，必须手动监听 storage 事件并更新 DOM。
为什么切换一个标签页，其他页不跟着变
浏览器对 localStorage 的设计就是「跨标签页广播但不自动响应」：A 标签页调用 setItem()，B 标签页会收到 storage 事件，但不会自动刷新 class、变量或 data-theme 属性——它只通知“有变化”，具体怎么响应得你写。
- 常见错误是只在页面加载时读一次
localStorage，之后完全忽略多标签场景 -
matchMedia().addEventListener('change')只响应系统级切换，不响应用户在另一标签页点按钮的行为 - 不监听
storage会导致：用户在 Tab1 切成暗色 → Tab2 仍显示亮色 → 刷新后才同步 → 体验割裂
如何用 storage 事件实时同步所有打开的标签页
监听 window 上的 storage 事件，在回调里重新读取值并更新 document.documentElement.dataset.theme，这是唯一可靠方式。
- 必须在页面初始化完成后立即绑定，例如放在
<script></script>块末尾或DOMContentLoaded后 - 检查
event.key === 'theme'（或你存的 key 名），避免响应其他存储项变更 - 用
event.newValue直接取新值，不要再次getItem()—— 它可能已被其他脚本覆盖 - 更新时用
document.documentElement.dataset.theme = event.newValue || 'light'，注意空值处理
storage 事件的三个实际坑点
这个事件看似简单，但在真实项目中高频出问题：
- 当前页修改
localStorage不会触发自身的storage事件 → 所以你的 toggle 函数里仍需手动更新 DOM，不能只依赖事件监听 - 移动端 Safari 在后台标签页恢复时，有时延迟触发或漏发 → 建议配合
visibilitychange事件做一次兜底检查 - 某些 Android WebView（尤其旧版）压根不支持
storage事件 → 若检测到不支持，降级为每 3–5 秒轮询localStorage.getItem('theme')
data-theme 更新后 CSS 还没生效？检查选择器写法
即使 dataset.theme 正确设为 'dark'，样式没变大概率是 CSS 选择器没命中。
- 错误写法：
[data-theme="dark"] { --bg: #121212; }—— 缺少html前缀，权重不够，且无法影响:root变量 - 正确写法：
html[data-theme="dark"] :root { --bg: #121212; }，确保变量注入到全局作用域 - 别忘了定义基础值：
:root { --bg: #fff; }，否则未匹配时var(--bg)会退化为initial，背景变透明 - 清空主题时用
delete document.documentElement.dataset.theme，不是设成''或'light'——[data-theme=""]不匹配空属性
最易被忽略的是：storage 事件只告诉你“变了”，但不负责“怎么变”；而 DOM 更新和 CSS 选择器是否生效，是两个独立环节，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
