Safari introduces Adaptive Dark Mode in 27.3

本文为原文前 6,000 字符的节选翻译，完整内容请查看原文。

Safari introduces Adaptive Dark Mode in 27.3

Safari 27.3 引入自适应深色模式

by Simon Fraser, Luming Yin, Lily Spiniolas, Joanne Pan, Veda Periwal and Jen Simmons 作者：Simon Fraser, Luming Yin, Lily Spiniolas, Joanne Pan, Veda Periwal 和 Jen Simmons

We’re excited to announce Adaptive Dark Mode in Safari 27.3 beta. When enabled by a user, Safari adapts light websites and presents them as dark. 我们很高兴宣布在 Safari 27.3 测试版中推出自适应深色模式。当用户启用该功能后，Safari 会自动调整浅色网站，并以深色模式呈现。

In the spring of 2019, Safari 12.1 became the first browser to support dark mode on the web. A lot of people love using dark mode, but not every website has a dark version. Almost 40% of web page loads are from users in dark mode, and yet only 10% of page loads support it. If you love dark mode, you’ve probably hit a site that felt particularly bright. Adaptive Dark Mode is designed to close that gap, providing a consistent dark experience across the web. 2019 年春季，Safari 12.1 成为首个支持网页深色模式的浏览器。许多人喜欢使用深色模式，但并非每个网站都提供深色版本。近 40% 的网页加载来自使用深色模式的用户，然而仅有 10% 的网页提供支持。如果你喜欢深色模式，可能遇到过感觉特别刺眼的网站。自适应深色模式旨在缩小这一差距，在整个网络中提供一致的深色体验。

You can try it today in Safari 27.3 beta. To enable, first make sure your system appearance is set to dark. Then browse to a website with a bright background. Safari will offer a preview of Adaptive Dark Mode. Tap ‘Try’. 你现在就可以在 Safari 27.3 测试版中尝试该功能。要启用它，请先确保你的系统外观设置为深色。然后浏览一个具有浅色背景的网站，Safari 将提供自适应深色模式的预览，点击“尝试”即可。

For websites that signal support of dark mode with in HTML or color-scheme: light dark in CSS, Adaptive Dark Mode does not change a thing. For the rest of the web, it quickly analyzes the page, looking at colors and estimating whether it’s predominantly light or dark. If the page generally has a dark background with light text, nothing is changed. When a page has a light appearance, Adaptive Dark Mode adapts the page to be dark. 对于通过 HTML 中的 <meta name="color-scheme" content="light dark"> 或 CSS 中的 color-scheme: light dark 声明支持深色模式的网站，自适应深色模式不会进行任何更改。对于其余网页，它会快速分析页面，查看颜色并评估其是否以浅色为主。如果页面通常具有深色背景和浅色文字，则不会进行更改。当页面呈现浅色外观时，自适应深色模式会将页面调整为深色。

At the core of Adaptive Dark Mode is the transformation of color. Sometimes colors are simply decorative, while other times they have semantic meaning. Adaptive Dark Mode determines when to invert colors so elements remain visible or when to leave colors unchanged. 自适应深色模式的核心在于颜色的转换。有时颜色仅具装饰性，而有时它们具有语义含义。自适应深色模式会判断何时反转颜色以保持元素可见，以及何时保持颜色不变。

While creating Adaptive Dark Mode, we developed a color matrix to invert the luminosity of colors while preserving hue. It’s used to make light backgrounds dark, and dark text light. When transforming text color, Adaptive Dark Mode aims for sufficient contrast as defined by the WCAG 4.5:1 contrast ratio. Light CSS gradients are also transformed to dark. 在创建自适应深色模式时，我们开发了一个颜色矩阵，在保留色相的同时反转颜色的亮度。它用于将浅色背景变为深色，将深色文字变为浅色。在转换文字颜色时，自适应深色模式旨在达到 WCAG 4.5:1 对比度标准所定义的充足对比度。浅色的 CSS 渐变也会被转换为深色。

Adaptive Dark Mode makes careful judgments so transformed content looks good and stays usable: buttons have contrast against backgrounds, text is visible over images, and hover menus look clear. 自适应深色模式会进行谨慎的判断，以确保转换后的内容既美观又实用：按钮与背景之间具有对比度，文字在图像上清晰可见，悬停菜单也清晰易读。

It takes the same care with images. Most are left unchanged, preserving their integrity. But many icons and logos can lose contrast when the background color behind them is inverted. So Adaptive Dark Mode inspects SVG images and transforms colors when needed. For bitmap images, it analyzes the pixel histograms and inverts simple black-and-white logos. 它对图像的处理同样细致。大多数图像保持不变，以保留其完整性。但许多图标和徽标在背景颜色反转时可能会失去对比度。因此，自适应深色模式会检查 SVG 图像并在必要时转换颜色。对于位图图像，它会分析像素直方图并反转简单的黑白徽标。

Effects like masks and mix-blend-mode can create undesirable results on an element whose colors have been transformed, so in some cases Adaptive Dark Mode turns such effects off. Also,

It’s precisely because Adaptive Dark Mode is happening deep within the WebKit browser engine that we are able to find creative ways to solve the most complex challenges, apply the transformations with great speed and power efficiency, all while rigorously protecting user privacy. 正是因为自适应深色模式是在 WebKit 浏览器引擎深处运行，我们才能够找到创造性的方法来解决最复杂的挑战，以极高的速度和能效应用转换，同时严格保护用户隐私。

In general, a web page will work well with Adaptive Dark Mode if it follows good modern web development practices. 通常情况下，如果网页遵循良好的现代 Web 开发实践，它就能很好地适配自适应深色模式。

If your site still uses older techniques, small updates can help. For logos and icons, swap bitmap images for SVG. Use solid or gradient colors in CSS instead of tiled background images. Replace image sprites with modern CSS for rounded corners, shadows, and button states. Create content images with transparent backgrounds instead of baking the page background color into the image. Add padding to containers to prevent crowding. 如果你的网站仍在使用旧技术，一些小的更新会有所帮助。对于徽标和图标，请将位图图像替换为 SVG。使用 CSS 中的纯色或渐变色代替平铺背景图像。使用现代 CSS 实现圆角、阴影和按钮状态，以取代图像精灵。创建带有透明背景的内容图像，而不是将页面背景颜色嵌入图像中。为容器添加内边距以防止拥挤。

Perhaps you want a specific dark mode experience for a certain portion of the page. Apply color-scheme: light dark to the relevant element and add your own dark styles. 也许你希望页面的特定部分具有特定的深色模式体验。请将 color-scheme: light dark 应用于相关元素，并添加你自己的深色样式。

For complete control over how your site looks in dark mode, add full support. It’s a terrific time to do so. It’s never been easier. 为了完全控制你的网站在深色模式下的外观，请添加全面支持。现在是这样做的好时机，而且从未如此简单。

All the web technology needed to fully support dark mode is widely available today, including: 目前，全面支持深色模式所需的所有 Web 技术已广泛可用，包括：

Newer CSS functions like color-mix() and contrast-color(), plus popular techniques for organizing design systems with CSS variables provide additional options and flexibility. 较新的 CSS 函数（如 color-mix() 和 contrast-color()），以及使用 CSS 变量组织设计系统的流行技术，提供了额外的选择和灵活性。

Be sure to declare dark mode support using the color-scheme meta tag in your HTML head and/or by setting the color-scheme property on :root or body in your CSS. Don’t wait to inject this information later via JavaScript. This best practice helps ensure your site is rendered correctly as fast as possible. 请务必在 HTML 头部使用 color-scheme 元标签，和/或在 CSS 中为 :root 或 body 设置 color-scheme 属性来声明对深色模式的支持。不要等到稍后通过 JavaScript 注入此信息。这一最佳实践有助于确保你的网站能尽快正确渲染。

If you would like your web app or website to not be transformed by Adaptive Dark Mode, you can communicate this using color-scheme. The HTML tag lets browsers know that 1) this page supports light mode and 2) should only be displayed in light mode. The color-scheme: light only rule does the same thing, but with the flexibility of CSS, allowing you to just target specific elements on the page — or of course, you can target the whole page with :root { }. (Note: the ‘only’ keyword is not supported in Safari 27.3 beta 1. Check back as Adaptive Dark Mode evolves through the beta process.) 如果你希望你的 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 中不受支持。请随着自适应深色模式在测试过程中的演进持续关注。）

Apple firmly believes user privacy is a fundamental human right. If websites could detect when a user has enabled Adaptive Dark Mode, that would increase the amount of fingerprintable information and weaken privacy protections against trackers. Apple 坚信用户隐私是一项基本人权。如果网站能够检测到用户何时启用了自适应深色模式，这将增加可用于指纹识别的信息量，并削弱针对追踪器的隐私保护。

As a result, Safari prevents websites from detecting when Adaptive Dark Mode has been applied. JavaScript that queries CSS colors will get the original authored colors, not the transformed ones. Any images drawn into canvas render in their original form. 因此，Safari 会阻止网站检测自适应深色模式是否已被应用。查询 CSS 颜色的 JavaScript 将获取原始编写的颜色，而非转换后的颜色。绘制到画布中的任何图像都将以其原始形式呈现。

If you manage a website or web app, and would like to discuss how Adaptive Dark Mode is adapting your project, feel free to reach out at web-evangelist@apple.com. 如果你管理着一个网站或 Web 应用，并希望讨论自适应深色模式如何适配你的项目，请随时通过 web-evangelist@apple.com 与我们联系。

If you try out Adaptive Dark Mode as a user, and find a site that does not work well, we’d love for you to file 如果你作为用户尝试了自适应深色模式，并发现某个网站适配效果不佳，我们非常欢迎你提交反馈。