Safari 27.3 测试版新增自适应深色模式，可自动将浅色网站转为深色

Simon Fraser、Luming Yin、Lily Spiniolas、Joanne Pan 和 Jen Simmons 联合撰写

我们很高兴地宣布，Safari 27.3 beta 中推出自适应深色模式（Adaptive Dark Mode）。当用户启用该功能后，Safari 会将浅色网站自适应呈现为深色。

2019 年春季，Safari 12.1 成为首个支持网页深色模式的浏览器。许多人喜欢使用深色模式，但并非每个网站都提供深色版本。目前近 40% 的网页加载来自处于深色模式的用户，然而只有 10% 的页面加载支持深色模式。如果你喜欢深色模式，很可能遇到过某个特别刺眼的网站。自适应深色模式正是为了弥合这一差距而设计，在整个网络上提供一致的深色体验。

你今天就可以在 Safari 27.3 beta 中试用。启用方法：首先确保系统外观设置为深色，然后浏览到一个背景明亮的网站。Safari 会提供自适应深色模式的预览，点击「Try」即可。

对于通过 HTML 中的 <meta name="color-scheme" content="light dark"> 或 CSS 中的 color-scheme: light dark 声明支持深色模式的网站，自适应深色模式不会做任何改动。对于其余网站，它会快速分析页面，检查颜色并判断页面整体是偏浅还是偏深。如果页面整体为深色背景配浅色文字，则不做任何更改。当页面呈现浅色外观时，自适应深色模式会将页面适配为深色。

自适应深色模式的核心是颜色的变换。有时颜色只是装饰性的，有时则承载语义含义。自适应深色模式会判断何时需要反转颜色以保持元素可见，何时应保持颜色不变。

在开发自适应深色模式的过程中，我们构建了一个颜色矩阵，用于在保留色相的同时反转颜色的明度。它被用来将浅色背景变为深色、深色文字变为浅色。在变换文字颜色时，自适应深色模式以 WCAG 规定的 4.5:1 对比度为标准，力求达到足够的对比度。浅色的 CSS 渐变也会被转换为深色。

自适应深色模式会做出细致的判断，确保变换后的内容既美观又可用：按钮与背景之间保持对比度，文字在图片上方清晰可见，悬停菜单显示清楚。

它对图片同样精心处理。大多数图片保持不变，以维护其完整性。但许多图标和标志在背景色被反转后可能失去对比度。因此，自适应深色模式会检查 SVG 图片，并在需要时变换颜色。对于位图，它会分析像素直方图，并对简单的黑白标志进行反转。

遮罩和 mix-blend-mode 等效果在颜色已被变换的元素上可能产生不理想的结果，因此在某些情况下，自适应深色模式会关闭这类效果。此外，<canvas> 内容保持不变，因为 canvas 中包含各种难以预测的内容。

正是因为自适应深色模式是在 WebKit 浏览器引擎深处实现的，我们才能找到创造性的方法来解决最复杂的挑战，以极高的速度和能效执行变换，同时严格保护用户隐私。

总的来说，如果网页遵循良好的现代 Web 开发实践，它就能与自适应深色模式良好配合。

如果你的网站仍在使用较旧的技术，做一些小改动会有所帮助。对于标志和图标，将位图替换为 SVG。使用 CSS 中的纯色或渐变颜色，而不是平铺背景图片。用现代 CSS 替代图片精灵来实现圆角、阴影和按钮状态。创建带透明背景的内容图片，而不是将页面背景色烘焙进图片。为容器添加内边距以避免内容拥挤。

也许你想为页面的某个特定区域提供专门的深色模式体验。对相关元素应用 color-scheme: light dark，并添加你自己的深色样式。

如果你希望完全掌控网站在深色模式下的外观，请添加完整支持。现在正是绝佳时机，从未如此简单。

下面是一个网站的示例：浅色模式（左）、应用自适应深色模式后（中）。如果网站创建了自定义深色模式，则可能呈现为第三个版本（右）。

完整支持深色模式所需的全部 Web 技术如今已广泛可用，包括：

color-mix() 和 contrast-color() 等较新的 CSS 函数，以及通过 CSS 变量组织设计系统的流行技术，提供了更多选项和灵活性。

请务必在 HTML head 中使用 color-scheme meta 标签和/或在 CSS 中为 :root 或 body 设置 color-scheme 属性，以声明深色模式支持。不要等到之后通过 JavaScript 注入此信息。这一最佳实践有助于确保你的网站尽可能快速地正确渲染。

如果你希望自己的 Web 应用或网站不被自适应深色模式所变换，可以通过 color-scheme 来传达这一点。HTML 标签 <meta name="color-scheme" content="light only"> 告知浏览器：1）此页面支持浅色模式；2）应仅在浅色模式下显示。color-scheme: light only 规则作用相同，但借助 CSS 的灵活性，你可以仅针对页面上的特定元素——当然，也可以通过 :root { } 针对整个页面。（注意：only 关键字在 Safari 27.3 beta 1 中尚不支持。随着自适应深色模式在 beta 过程中不断演进，请持续关注。）

Apple 坚信用户隐私是一项基本人权。如果网站能够检测到用户何时启用了自适应深色模式，那将增加可被指纹识别的信息量，削弱针对追踪器的隐私保护。

因此，Safari 阻止网站检测自适应深色模式是否已被应用。查询 CSS 颜色的 JavaScript 将获得原始编写时的颜色，而非变换后的颜色。绘制到 canvas 中的任何图片都以其原始形式渲染。

（原文较长，此处译出前 6000 字，完整内容请点「打开原文」。）