暗黑模式与系统主题冲突吗？

HTML暗黑模式与系统主题本质上互不干扰，但若想实现真正的协同体验，必须主动通过window.matchMedia监听prefers-color-scheme变化，并在DOM渲染前精准初始化data-theme、统一使用带默认值的CSS变量、严格同步localStorage与页面状态，同时确保color-scheme meta标签存在以支持原生控件——稍有疏漏（如延迟设置data-theme、硬编码颜色或忽略change事件守卫），就会导致闪屏、主题错乱或用户偏好被覆盖，让本该丝滑的主题切换变成令人困惑的体验断层。

HTML暗黑模式和系统主题不冲突，但也不会自动协同——它们是两套完全独立的机制，网页不会因为系统切了暗色就“自动变暗”，也不会因网页设了暗色而影响系统设置。

prefers-color-scheme 只是提示，不是指令

浏览器通过 window.matchMedia("(prefers-color-scheme: dark)") 获取的是用户在操作系统里表达的「偏好」，它既不保证实时同步，也不触发强制样式更新。这个媒体查询返回的 matches 值只在 JS 执行那一刻有效，后续系统切换主题时，若没监听 change 事件，页面就完全无感。

• 首次加载时读一次 matches 是必须的，但仅靠它无法响应运行时变化
• 监听必须写守卫：只有 !localStorage.getItem("theme") 为真时才响应 change，否则用户手动选的主题会被悄悄覆盖
• 错误做法：每次刷新都先查系统偏好，再决定用哪个主题——这会导致用户刚点完“亮色”，刷新又回暗色

data-theme 必须在 DOM 渲染前设置

如果 JS 在 DOMContentLoaded 之后才给 document.documentElement 设置 data-theme，浏览器会先按无主题 CSS 渲染一遍（通常是亮色），再重绘，造成闪屏。这不是视觉瑕疵，而是逻辑断裂。

• 解决方案：把初始化逻辑写在