不能只靠@media (prefers-color-scheme: dark)就完事，必须同步使用color-scheme + 顶层:root变量 + 显式色彩空间控制；Safari因解析严格、变量未顶层声明或嵌套媒体查询被忽略，常致深色模式不生效或部分失效。
直接结论：不能只靠 @media (prefers-color-scheme: dark) 就完事，Safari 和 Chrome 对变量作用域、媒体查询解析顺序、原生控件适配的处理逻辑不同，必须同步用 color-scheme + 顶层 :root 变量 + 显式色彩空间控制三者配合。
为什么 Safari 深色模式常“不生效”或“部分失效”
Safari（尤其是 iOS 13–15 和 macOS Monterey）对 @media (prefers-color-scheme: dark) 的解析更严格：嵌套在其他媒体查询里会被忽略；:root 变量若没在顶层先声明，默认值为空，var(--bg) 回退成浏览器默认（白底黑字），导致深色规则“写了也白写”。Chrome 虽兼容性好些，但若页面用了 document.write 或内联 <style>，也可能跳过重算。
- 检查 DevTools → Styles 面板，切换系统主题后看目标规则是否被划掉（未匹配）或灰显（优先级不足）
- 确保所有变量都在顶层
:root中先定义，例如--bg: #fff;、--text: #333;，不能只在@media块里声明 -
@media (prefers-color-scheme: dark)必须放在所有:root默认定义之后，且不能包裹在@media (max-width: 768px)等内部
如何让 color-scheme 和 prefers-color-scheme 真正协同工作
color-scheme: light dark 是告诉浏览器“我支持两种主题”，它不改你的 CSS，但会强制 input、button、scrollbar 等原生控件自动适配系统色——这是 Safari 和 Chrome 都能一致响应的底层机制。但它和 prefers-color-scheme 必须配合，否则自定义样式仍错位。
- 全局加在
:root上：:root { color-scheme: light dark; } - 紧接着写默认浅色样式：
:root { --bg: #fff; --text: #333; } - 再跟
@media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; --text: #e6e6e6; } }——顺序不能颠倒 - 别指望
color-scheme自动改你写的background: #fff，它只影响浏览器原生渲染逻辑
哪些颜色写法在 Safari 里会“漂移”？怎么锁死
#FF6B6B 在 Safari 看起来偏粉、Chrome 偏橙，不是 bug，是 Safari 默认把未声明色彩空间的颜色映射到 Display P3，Chrome 坚守 sRGB。十六进制、rgb()、hsl() 全部隐式绑定 sRGB，但最终渲染由浏览器决定。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 必须显式写
color(srgb 1 0.4196 0.4196)，数值归一化（0–1），且带 fallback：color: #FF6B6B; color: color(srgb 1 0.4196 0.4196); - 避免用
color(display-p3)作主色——sRGB 屏幕会过饱和，且无有效 fallback - 按钮阴影、边框等非纯色属性也要同步更新，比如
box-shadow: 0 1px 3px rgba(0,0,0,0.1)在深色下得改成rgba(0,0,0,0.3) - 图片边缘发虚、
<input type="date">下拉箭头变黑底黑箭头、<pre>背景仍是白色——这些都不是颜色变量问题，而是组件未适配深色语义
透明边框、文字模糊、sticky 失效这些“隐形坑”怎么绕开
Safari 对合成层触发极其敏感：opacity: 0.99、filter: blur(0)、transform 都会让文字进入 GPU 图层，亚像素渲染失效，边缘立刻发虚；border: 1px solid transparent 在 Safari 里等于“不绘制”，热区丢失、backdrop-filter 不触发。
- 禁用
opacity: 0.99，改用opacity: 1或visibility: hidden - 删掉所有
filter: blur(0)、filter: brightness(1) - 把
border: 1px solid transparent换成border: 1px solid rgba(0, 0, 0, 0.001)（实测最小有效 alpha） -
position: sticky失效时，在外层加isolation: isolate
真正麻烦的不是某一条规则写错，而是多个点叠加：一个用了 color(srgb) 的按钮，又带 backdrop-filter，还设了 border: 1px solid transparent——Safari 会同时触发合成层 + 边框丢弃 + 主题变量未重声明，结果就是全链路失效。每个点都得单独验、单独修。
