自动深色主题

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>-<sche>me: 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=&q>uot;onl<y lig>ht"
  ...
/head

按元素选择退出

第二种停用方法是将 color-scheme CSS 属性的值设置为 only light。尽管可以使用逐个元素选择退出方法来为整个网页选择退出自动深色模式，但这种方法的优势在于，它允许仅选择退出网页的特定部分：

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

您仍然可以通过在 :root 元素上设置配色方案，使用此方法让整个网页选择退出自动深色主题：

:root {
  color-scheme: only light;
}

请向我们发送反馈！

我们仍在指定自动深色主题，并期待收到有关实现的所有方面的反馈：从变暗算法的结果到用于元素自定义和停用的开发者 API。

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

照片由 Félix Besombes 拍摄。