CSS深色模式兼容指南：Safari与Chrome差异处理

想要彻底做好网站深色模式适配，不能只依赖 @media (prefers-color-scheme: dark)，还需要同时结合 color-scheme、顶层 :root 变量声明，以及显式色彩空间控制。尤其是在 Safari 浏览器中，由于 CSS 解析规则更严格，如果变量没有在顶层提前声明，或

想要彻底做好网站深色模式适配，不能只依赖 @media (prefers-color-scheme: dark)，还需要同时结合 color-scheme、顶层 :root 变量声明，以及显式色彩空间控制。尤其是在 Safari 浏览器中，由于 CSS 解析规则更严格，如果变量没有在顶层提前声明，或者嵌套媒体查询未被正确识别，就很容易出现深色模式失效、仅部分生效，或 Safari 与 Chrome 显示不一致的问题。

如何用CSS兼容深色模式在Safari和Chrome中的差异？

结论很明确：深色模式兼容不能只靠 @media (prefers-color-scheme: dark)。Safari 和 Chrome 在 CSS 变量作用域、媒体查询解析顺序、原生表单控件主题适配上的处理机制并不相同，因此必须把 color-scheme、顶层 :root 变量和显式色彩空间控制配合使用，才能稳定实现 CSS 深色模式兼容。

为什么 Safari 深色模式经常“不生效”或“只有部分生效”

Safari（尤其是 iOS 13–15 以及 macOS Monterey 版本）对 @media (prefers-color-scheme: dark) 的解析比 Chrome 更严格：如果它被嵌套在其他媒体查询中，Safari 可能直接忽略；如果 :root 变量没有先在顶层声明，默认值就会为空，像 var(--bg) 这样的变量会回退为浏览器默认样式，也就是常见的白底黑字，最终导致深色模式 CSS 规则看似写了，实际却没有正确生效。Chrome 虽然兼容性更宽松，但如果页面中使用了 document.write 或内联