自动深色主题

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，将配色方案设置为浅色。 如果计算出的背景颜色不是白色 (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。

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

摄影：Félix Besombes。