暗黑模式不能替代系统主题，它仅通过prefers-color-scheme读取系统偏好，无法反向写入；需用matchMedia监听change事件实现动态响应，并优先尊重用户手动选择，配合localStorage持久化主题状态。
暗黑模式不能替代系统主题，但能响应系统偏好
HTML 暗黑模式本身只是页面级样式切换机制，它不接管、也不改变操作系统层面的主题设置。浏览器通过 prefers-color-scheme 媒体查询读取系统偏好（如 macOS 的“深色外观”或 Windows 的“深色模式”），但仅限于读取——无法反向写入或强制同步。这意味着：即使网页启用了暗黑样式，系统仍可能在中途切换主题，而网页是否响应，取决于你有没有监听变化并重绘。
如何用 prefers-color-scheme 正确响应系统主题
关键不是“一次性判断”，而是持续响应。很多开发者只在 CSS 里写一次媒体查询，结果系统切换后页面没反应。
-
@media (prefers-color-scheme: dark)只在初始渲染时生效，不自动更新；需配合 JavaScript 监听change事件 - 监听方式：用
window.matchMedia('(prefers-color-scheme: dark)')获取MediaQueryList实例，再调用.addEventListener('change', handler) - 注意兼容性：
matchMedia在 IE 中完全不支持，Safari 14+ 才支持change事件（旧版需轮询.matches） - 实际建议：CSS 媒体查询负责默认样式，JS 监听仅用于动态更新 class 或触发局部重绘，避免全量重载
手动切换按钮和系统偏好冲突怎么办
用户点了“切换为深色”按钮，但系统又切回浅色——此时以谁为准？没有标准答案，但必须明确策略，否则 UI 状态错乱。
- 推荐做法：优先尊重用户显式操作，即“手动覆盖系统”。用 localStorage 记录用户选择（如
theme: 'dark'），加载时优先读取该值，而非直接依赖prefers-color-scheme - 若要恢复系统同步，需提供“跟随系统”选项，并清除本地存储项，再重新读取
matchMedia结果 - 容易踩的坑：
localStorage读取是同步的，但 CSS 切换有延迟，可能导致闪屏；建议在上提前加class="loading"，等主题确定后再移除 - 不要在服务端做 UA + 主题嗅探：移动端 UA 不暴露系统主题，且 CDN 缓存会污染不同用户的响应
为什么 color-scheme: dark 不能解决所有问题
color-scheme 是 CSS 属性，告诉浏览器“本元素期望的配色方案”，影响表单控件、滚动条等原生元素的默认渲染，但它不控制你的自定义组件颜色，也不触发 JS 逻辑。
立即学习“前端免费学习笔记（深入）”；
-
color-scheme: dark仅对<input>、<textarea></textarea>、<select></select>等原生控件生效，且依赖浏览器实现（Firefox 目前部分不支持） - 它不会让
<div> 自动变黑，也不会触发 <code>@media (prefers-color-scheme: dark) - 更隐蔽的问题：某些安卓 WebView 忽略
color-scheme，但会响应prefers-color-scheme媒体查询——所以两者最好共存，不可互替 - 如果你用的是 CSS-in-JS 或 Shadow DOM，
color-scheme可能被隔离，需显式透传到 shadow root
真正难的不是检测系统主题，而是处理“用户意图”和“系统状态”的竞态：点击按钮、系统切换、页面刷新、iframe 嵌套、SSR 渲染……这些场景下，prefers-color-scheme 的时机和可信度都在变化。别指望一个 media query 或一个属性搞定全部。
