需先开启系统深色模式,再在Safari“网站偏好设置”中手动设为“深色”,才能确保网页响应prefers-color-scheme: dark信号;否则即使系统为深色,部分网页仍以亮色加载。

让Safari浏览器里的网页自动跟随系统进入深色模式,需确保系统深色开关已启用,且Safari正确向网站传递prefers-color-scheme: dark信号,否则即使系统设为深色,部分网页仍以亮色加载。
开启iOS/macOS系统级深色外观
1、在iPhone或iPad上:打开「设置」→「显示与亮度」→点击「深色」;
在Mac上:点击苹果菜单→「系统设置」→「外观」→选择「深色」。
这一步是基础前提,【若此处未开启,后续所有网页都无法响应深色偏好】。
2、确认「自动」选项是否启用(可选):在「显示与亮度」中开启「自动」,系统将按日出日落时间切换深色/浅色,Safari会随之动态响应。
配置Safari发送深色配色偏好信号
仅开启系统深色模式,不等于网页一定变暗——很多网站依赖CSS媒体查询判断用户意图。必须让Safari主动声明偏好,才能触发适配。
第一步:打开Safari → 点击右下角「aA」图标 → 选择「网站偏好设置」。
第二步:在「外观」右侧下拉菜单中,明确选择「深色」。
第三步:关闭面板,刷新当前网页(如维基百科、GitHub),已支持该标准的页面将立刻应用深色样式表。
注意:此设置位于「网站偏好设置」而非「Safari设置」全局选项中,旧版教程常误导向错误路径,导致设置无效。
验证当前网页是否真正响应了系统深色模式
方法一:访问测试页 https://browserspy.dk/color.php ,查看“prefers-color-scheme”一行是否显示“dark”。
方法二:在任意支持深色的网站(如developer.mozilla.org),用开发者工具检查CSS,搜索@media (prefers-color-scheme: dark),确认对应规则被加载且生效。
方法三:临时关闭系统深色模式→刷新网页→再开启→观察是否同步切换,无延迟即表示链路通畅。
如果测试页显示light,说明Safari未成功发送信号,需返回上一节重新检查「网站偏好设置」中的选项是否真实选中并保存。











