自动深色主题

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