自动深色主题

André Cipriani Bandarra

Chrome 96 为 Android 上的自动深色主题引入了源试用。 借助此功能，当用户在操作系统中选择启用深色主题时，浏览器会将自动生成的深色主题应用于浅色主题的网站。用户可以通过在操作系统级别或 Chrome 中的特定设置中停用该选项，来停用深色主题。

注册源代码试用版

您还可以通过来源试用为用户启用深色模式算法。这样，您就可以测试自动深色主题在 KPI 方面的表现。

请参阅相关文档，了解如何设置源试用，然后注册 AutoDarkMode 源试用以获取令牌。

在设备上测试自动深色主题

使用开发者工具

如需在开发者工具中启用自动深色主题，请执行以下操作：

  1. 点击三点状菜单。
  2. 依次选择更多工具和渲染。
  3. 在模拟自动深色模式选项中，选择启用。

在 Android 手机上

如需在 Android 手机上测试自动深色主题，请执行以下操作：

  1. 前往 chrome://flags 并启用 #darken-websites-checkbox-in-theme-setting 实验。
  2. 然后，点按三点状菜单，依次选择设置和主题，然后勾选尽可能对网站应用深色主题对应的复选框。

现在，浅色网页在手机上会变暗。

按元素自定义

虽然我们的目标是让自动深色主题在所有情况下都能产生良好的效果，但在与开发者的早期对话中，我们发现他们希望调整特定元素，以更好地适应所需的外观和风格。

在此源站试用版中，您可以使用 JavaScript 检测用户是否处于自动深色主题，然后自定义所需元素，从而实现这些自定义。

检测自动深色主题

如需检测用户是否处于自动深色主题，请创建一个将 background-color 设置为 canvas 且将 color-scheme 设置为 light 的元素。如果计算出的背景颜色不是白色 (rgb(255, 255, 255))，则系统会对页面应用自动深色主题。

<div id="detection"
     style="display: none; background-color: canvas; color-scheme: light">
</div>

const detectionDiv = document.querySelector('#detection');
// If the computed style is not white then the page is in Auto Dark Theme.
const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';
// Update element styles when Auto Dark Theme is applied.
if (isAutoDark) {
  const myElement = document.querySelector('#my-element');
  myElement.classList.add('autoDarkOnlyStyle');
}

自定义大量元素

如果您需要自定义大量元素，则上述解决方案可能很难扩缩。另一种方法是使用自动深色主题检测为页面正文添加标记类：

function setAutoDarkClass() {
  // We can also use JavaScript to generate the detection element.
  const detectionDiv = document.createElement('div');
  detectionDiv.style.display = 'none';
  detectionDiv.style.backgroundColor = 'canvas';
  detectionDiv.style.colorScheme = 'light';
  document.body.appendChild(detectionDiv);
  // If the computed style is not white then the page is in Auto Dark Theme.
  const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';

  // remove the detection element from the DOM.
  document.body.removeChild(detectionDiv);

  // Set the marker class on the body if in Auto Dark Theme.
  if (isAutoDark) {
    document.body.classList.add('auto-dark-theme');
  }
}
document.addEventListener("DOMContentLoaded", setAutoDarkClass);

然后，根据需要使用 CSS 自定义元素：

.auto-dark-theme > #my-element {
  border-color: red;
}

每元素自定义 API 仍处于早期开发阶段。我们正在与标准团队合作，为开发者提供更具表现力的停用 API。您可以通过此 GitHub 问题跟踪相关讨论。

如何停用自动深色主题

除了尊重用户在其设备上的选择之外，深色主题还能为用户带来诸多好处，例如延长电池续航时间和提高无障碍功能。我们强烈建议您实现您自己精选的深色主题，而不是停用自动深色主题，以尊重用户的偏好设置并保留这些优势。

不过，如果您无法实现自己的深色主题，并且自动深色主题生成的结果不尽如人意，则可以选择停用该功能，

使用元标记

停用自动深色主题的第一种方法是将以下元标记添加到网页的标头中。 使用元标记的好处在于，它可以完全阻止应用自动深色主题，这可能会导致“深色内容闪烁”。

<head>
  <meta name="color-scheme" content="only light">
  ...
</head>

按元素选择停用

停用的第二种方法是将 color-scheme CSS 属性的值设置为 only light。虽然按元素选择停用功能可用于让整个网页停用自动深色模式，但这种方法的一个优势是，它允许仅停用网页的特定部分：

#my-element {
  color-scheme: only light;
}

您仍然可以使用此方法为整个网页停用自动深色主题，只需为 :root 元素设置 color-scheme 即可：

:root {
  color-scheme: only light;
}

请向我们发送反馈！

自动深色主题仍在指定中，我们希望您就实现的各个方面提供反馈：从深色算法的结果到用于自定义元素和停用深色主题的开发者 API。

您可以通过以下多个渠道向我们发送反馈：

照片由 Félix Besombes 拍摄。