Chrome 96 针对 Android 上的自动深色主题引入了源试用。借助此功能,当用户已在操作系统中选择使用深色主题时,浏览器会将自动生成的深色主题应用于浅色主题网站。用户可以通过在操作系统级别或在 Chrome 的特定设置中停用深色主题来选择停用深色主题。
注册源试用
您还可以通过源试用为用户启用调暗算法。 这样,您就可以测试自动深色主题在 KPI 方面的效果。
请参阅相关文档,了解如何设置源试用,然后注册 AutoDarkMode 源试用以获取令牌。
在您的设备上测试自动深色主题
使用开发者工具
如需在开发者工具中启用自动深色主题,请执行以下操作:
- 点击三点状菜单。
- 依次选择更多工具和呈现。
- 在模拟自动深色模式选项中选择启用。
在 Android 手机上
如需在 Android 手机上测试自动深色主题,请执行以下操作:
- 前往
chrome://flags
并启用#darken-websites-checkbox-in-theme-setting
实验。 - 然后,点按三点状菜单,依次选择设置和主题,然后选中尽可能为网站应用深色主题复选框。
现在,手机上的浅色页面会变暗。
按元素自定义
尽管我们旨在让自动深色主题在任何情况下都能实现良好的效果,但在与开发者的早期对话中,他们建议他们想要调整特定元素,以更好地适应他们所需的外观和风格。
在此源试用中,您可以使用 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。
您可以通过多种渠道向我们发送反馈:
- 通过开发者问卷调查参与调查。
- 提交有关 Chromium 项目的 bug。
- 通过源试用反馈表单提交反馈。
照片由 Félix Besombes 拍摄。