webkit代码：WebKit中已支持暗黑模式

webkit代码：WebKit中已支持暗黑模式当使用高对比度访问模式或使用不同的浏览器和系统版本时，这些默认的背景和文本颜色可以是不同的值。你不能假设它们总是相同的颜色值。例如，这个简单的页面，在指定了color-scheme: light dark后，它就完全可以使用这两种外观。并非所有的web内容都是简单的。出于这个原因，Safari和WebKit不会自动调暗web内容——文档需要选择后才进入暗黑模式。表明你的内容支持暗模式的主要方法是采用本提议中指定的新color-shceme样式属性。你可以在样式表中像这样使用这个继承的属性:在root元素上指定light和dark值，让引擎知道文档支持这两种模式。这将更改页面的默认文本和背景颜色，以匹配当前系统外观。此外，标准表单控件、滚动条和其他命名的系统颜色会自动更改它们的外观。如果没有这个声明，引擎使用深色表单控件或深色配色方案将是不安全的，因为许多文档都是根据一个假定的浅色配色方案设

随着去年macOS Mojave引入了暗黑模式，web开发人员一直要求Safari也支持暗黑模式来样式化其内容，以便与系统外观相匹配。而随着macOS 10.14.4中Safari 12.1的更新，WebKit中已经实现了对暗黑模式的支持。

暗黑模式行为

默认情况下，当用户处于暗黑模式时，页面的行为不会随外观发生变化。这保留了web设计师近30年来遵守的标准假设——页面默认为白色背景和黑色文本。在暗黑模式下更改这些默认值将会带来噩梦般的web兼容性问题。

然而，这使得屏幕的很大一部分区域在暗黑模式下可能有明亮的内容。对于简单的内容，应用程序可以将文档中的颜色转换为暗黑模式。这就是Mail应用程序在macOS Mojave中所做的——它显示带有暗黑模式解释的简单电子邮件消息。

并非所有的web内容都是简单的。出于这个原因，Safari和WebKit不会自动调暗web内容——文档需要选择后才进入暗黑模式。表明你的内容支持暗模式的主要方法是采用本提议中指定的新color-shceme样式属性。

你可以在样式表中像这样使用这个继承的属性:

在root元素上指定light和dark值，让引擎知道文档支持这两种模式。这将更改页面的默认文本和背景颜色，以匹配当前系统外观。此外，标准表单控件、滚动条和其他命名的系统颜色会自动更改它们的外观。如果没有这个声明，引擎使用深色表单控件或深色配色方案将是不安全的，因为许多文档都是根据一个假定的浅色配色方案设计的。

例如，这个简单的页面，在指定了color-scheme: light dark后，它就完全可以使用这两种外观。

当使用高对比度访问模式或使用不同的浏览器和系统版本时，这些默认的背景和文本颜色可以是不同的值。你不能假设它们总是相同的颜色值。

color-scheme样式属性还支持选择文档中特定元素的样式规则，而不仅仅是root元素。如果你有内容或组件需要特定的配色方案，特别是包含表单控件的内容，这是非常有用的，因为暗黑模式表单控件在浅色背景下看起来是不正确的。

这个提议中还定义了<meta name="color-scheme">语法。这个meta标记声明允许像Mail这样的应用程序在早期解析文档时就知道应该使用哪种颜色方案，因为它会影响应用于文档颜色的自动调暗转换过程。在一个丰富的电子邮件消息中声明<meta name="color-scheme" value="light dark">语句，让Mail应用程序知道它支持自己的暗模式样式。你还可以指定"light only"，通知Mail应用程序它不能转换你的浅色配色方案邮件消息。

备注:在Safari技术预览版81中，color-scheme属性和meta标记名称是从supported-color-schemes重命名而来的。在macOS 10.14.4中，WebKit、Safari和Mail支持旧名称。这是一个还在开发中的标准，在未来变化可能会比较大。

对暗黑模式进行样式化

定义color-scheme将使你得到简单的内容。对于大多数web内容，你将需要对带有自定义颜色或图像的样式元素采用这个提议中指定的prefers-color-scheme媒体查询。你可以在任何支持媒体查询的地方使用此媒体查询，例如 在<picture> 元素中或用于脚本触发器的window.matchMedia()中。

在你的文档中部署暗黑和浅色配色方案的最佳方法是使用CSS变量。然后，您就可以轻松地使用媒体查询在一个地方指定颜色，并在整个样式表中使用这些变量。当媒体查询匹配时，变量将在使用它们的任何地方进行更改——使用任何外观更改自动切换。

下面是一个使用媒体查询指定带有CSS变量的颜色值的例子:

图像和暗黑模式

对于大多数主题图像来说，它们在暗黑模式下看起来仍然很棒——它们甚至可能比以往任何时候都突出!如前所述，如果你有一个暗黑模式版本，您可以在<picture>元素或样式规则中使用preferences -color-schemes媒体查询来选择一个不同的图像。

对于我们的简单例子页面，我们可以选择一个不同的Mojave沙漠的主题图像:

你可能还拥有用于控件的图像或其他交互元素，那你需要对它们进行更新以适应暗黑模式。现在，许多站点都采用矢量图像来显示glyph，比如SVG或web字体。字体会自然地适应你的暗模式的文本颜色，但SVG图像需要进行一些额外的样式化之后才会看起来正确。你可以对SVG使用的一个技巧是通过currentColor关键字来让嵌入的SVG使用当前文本颜色——从而自动适应你的暗黑模式的文本颜色。你还可以使用CSS变量在SVG中设置颜色的样式，就像在其他元素中一样。

对于无法以其他方式设置样式的特定图像，你可以使用一个CSS invert()过滤器。如果该图像也有颜色，你可以考虑使用invert() hue-rotate(180deg)来适当地保留图像的意图。在任何情况下，你都不应该对内容的广泛部分使用整体过滤器，因为这可能会导致高内存和性能成本。使用颜色的直接样式化是提高颜色精度和性能的最佳方法。

调试暗黑模式

现在，Web Inspector的Elements选项卡中有一个导航栏按钮可以用来切换暗黑模式或浅色模式，这取决于你当前的总体系统首选项。这样一来，你就可以在两种外观中快速测试页面，而不需要在System Preferences 中切换整个系统外观。 Styles侧边栏会进行更新来显示当前的匹配规则，以及任何CSS颜色变量。

例子

如果你在macOS 10.14.4上使用Safari 你可能已经注意到，WebKit.org站点已经支持暗模式了。由于我们不久前在Safari技术预览版中添加了对暗黑模式的支持，其他一些站点也开始采用了暗黑模式。下面是一些你目前可以查看的例子：

• Twitter — 社交网络服务。
• Emojipedia —emoji 含义之家。
• NSHipster —一个关注被忽略的Objective-C、Swift和Cocoa特性的日志。
• CSS DB — 一个使用了CSS特性的数据库。
• Stuff & Nonsense — 一个设计工作室，专注于数字产品和web的创意设计。

英文原文：https://webkit.org/blog/8840/dark-mode-support-in-webkit/

译者：忧郁的红秋裤