此页面由 Cloud Translation API 翻译。

自动深色主题

André Cipriani Bandarra

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

注册源试用

您还可以通过源试用为用户启用调暗算法。这样，您就可以测试自动深色主题在 KPI 方面的效果。

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

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

使用开发者工具

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

点击三点状菜单。
依次选择更多工具和呈现。
在模拟自动深色模式选项中选择启用。

在 Android 手机上

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

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

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

按元素自定义

尽管我们旨在让自动深色主题在任何情况下都能实现良好的效果，但在与开发者的早期对话中，他们建议他们想要调整特定元素，以更好地适应他们所需的外观和风格。

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

注意：应用自动深色主题后，可以使用 prefer-color-scheme: dark 媒体查询自定义元素。不过，没有自动深色主题的其他浏览器也会应用此颜色，从而导致页面采用浅色主题，但只有部分元素会变暗。

检测自动深色主题

如需检测用户是否启用了自动深色主题，请创建一个元素，将 background-color 设置为 canvas，并将配色方案设置为浅色。如果计算出的背景颜色不是白色 (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 元素上设置配色方案即可：

:root {
  color-scheme: only light;
}

请向我们发送反馈！

自动深色主题仍处于指定阶段，我们希望获得关于实现所有方面的反馈：从调暗算法的结果到用于元素自定义和选择停用的开发者 API。

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

通过开发者问卷调查参与调查。
提交有关 Chromium 项目的 bug。
通过源试用反馈表单提交反馈。

照片由 Félix Besombes 拍摄。