网页检查器中的深色模式

macOS Mojave 上的网页检查器现已支持深色模式。

网页检查器中的深色模式于去年在 Safari 技术预览中推出。本文重点介绍了可能对任何为其网站或网页视图适配深色模式的人有帮助的实现细节。

---

如何为网页检查器启用深色模式？

网页检查器与 macOS 外观匹配。要在 macOS Mojave 中启用深色模式，请前往“系统偏好设置 → 通用”并选择“外观：深色”（有关更多详细信息，请参阅如何在 Mac 上使用深色模式）。请注意，无法仅为网页检查器启用深色模式。

macOS Mojave 及更高版本支持网页检查器中的深色模式。

为什么 macOS 10.13 High Sierra 及以下版本不支持深色模式？
网页检查器使用原生表单控件。macOS Mojave 具有每个表单控件（文本字段、按钮、复选框、下拉菜单、单选按钮等）的深色版本。

macOS 10.13 High Sierra 及以下版本不支持深色模式，且只有浅色版本的表单控件。如果没有正确的表单控件样式，深色模式体验将不一致，因此我们决定不这样做。

---

我们尝试保留浅色主题的语法高亮颜色。为了保持文本可读性，我们增加了亮度——通过增加亮度和有时改变色相。

对于某些情况，例如“网络”标签页中的条形图，我们不需要更改任何内容。相同的颜色在浅色和深色主题中都可读。

SVG 和 currentColor

我们没有为深色模式维护一套单独的图标，而是尽可能使用 CSS 更改了现有图标的颜色。

大多数网页检查器图标都是以内联方式包含在 HTML 中的 SVG 文件

<svg style="color: blue">
    <use xlink:href="Images/Paint.svg#root"/>
</svg>

Paint.svg

<svg id="root">
    <path fill="currentColor" d="..."/>
</svg>

currentColor 是父元素的颜色。在此示例中，它是蓝色。

currentColor 仅适用于内联 SVG。它不适用于通过 <img> 元素或 CSS（例如通过 background-image 或 content）包含的 SVG。对于这些情况，我们使用 CSS 滤镜来反转颜色。

CSS 滤镜

网页检查器中深色模式的最初迭代是一个单独的 CSS 规则

body {
  filter: invert()
}

反转颜色会将色相旋转 180 度。请注意选定的颜色如何从蓝色变为橙色。我们通过再旋转 180 度来修复了这个问题

body {
   filter: invert() hue-rotate(180deg)
}

这有几个问题。颜色与深色模式人机界面指南不完全匹配。深色阴影变成了浅色。

我们最终没有对 body 使用此滤镜，但我们将其用于通过 CSS（例如通过 background-image 或 content）包含的图标，其中 currentColor 不起作用。

CSS 变量

实现深色模式花费了超过 1,000 行 CSS。我们广泛使用 CSS 变量来减少代码重复。

以前，我们有像 --text-color-dark-gray 和 --text-color-light-gray 这样的变量名。在深色模式下，它们必须反转才能提供与背景所需的对比度：--text-color-dark-gray 将变为浅灰色，而 --text-color-light-gray 将变为深灰色。

我们开始使用语义名称，例如 --text-color-secondary 代替 --text-color-dark-gray，以及 --text-color-tertiary 代替 --text-color-light-gray。

贡献

请在 webkit.org/new-inspector-bug 上报告有关网页检查器中深色模式的 Bug。请务必在标题中包含“深色模式”。

如果您有兴趣贡献或有任何疑问，请访问 #webkit-inspector IRC 频道。