虽然很大一部分网页用户偏好深色模式，但网页开发领域存在巨大的差异：约 40% 的页面加载是由处于深色模式的用户执行的，然而其中只有 10% 的页面实际上支持原生深色主题。为了弥合这一差距，Safari 27.3 引入了自适应深色模式。启用后，浏览器会识别那些未声明支持深色模式的网站，并自动调整其外观。如果网站已通过标准的 HTML meta 标签或 CSS 属性声明支持，Safari 将尊重开发者的原始设计且不作任何更改。
该图像展示了浏览器通过反转亮度来识别和适配缺乏原生深色模式支持的网站的能力。
这种转换发生在 WebKit 浏览器引擎深处，能够实现高速、低功耗的颜色处理。其核心系统使用颜色矩阵在保留原始色调的同时反转颜色的亮度。这确保了浅色背景变为深色，深色文本变为浅色，同时保持可读性。引擎专门针对 WCAG 4.5:1 的对比度比例进行优化，以确保文本保持可见。此外，系统能够区分装饰性颜色和语义颜色，做出谨慎判断，以确保按钮在背景上保持对比度，且文本在图像上保持清晰可辨。
自适应深色模式还能处理复杂的资产，如徽标和图标。虽然大多数位图图像保持不变以保留其完整性，但引擎会检查 SVG 图像并在必要时转换其颜色。对于位图图像，它通过分析像素直方图来识别并反转简单的黑白徽标。为了避免不可预测的结果，浏览器会关闭转换元素上的某些效果（如 mask 和 mix-blend-mode），并让 <canvas> 内容完全保持不变。为了保护用户隐私并防止指纹识别，Safari 确保网站无法检测到自适应深色模式是否处于激活状态；JavaScript 查询 CSS 颜色时仍将返回原始设计的数值，而非转换后的数值。
开发者有几种方式与这一新功能进行交互。网站可以通过使用 `color-scheme: light only` 规则完全退出转换，该规则告知浏览器仅以浅色模式显示页面。或者，开发者可以通过使用现代 CSS 函数如 `light-dark()`、`color-mix()` 和 `contrast-color()` 实现原生深色模式，提供更优越的手工定制体验。为了获得最佳的自适应深色模式效果，WebKit 团队建议使用 SVG 作为徽标，在 CSS 中使用纯色或渐变色而非平铺背景图像，并创建具有透明背景的内容图像，而不是将特定的页面颜色烘托在图像中。
此视觉效果说明了浏览器的自动适配与开发者可以提供的精心制作的体验之间的区别。