类似于“How to detect if OS X is in dark mode?”,仅适用于浏览器。
有没有人发现是否有办法检测用户的系统是否处于 Safari/Chrome/Firefox 中的新 OS X 暗模式?
我们想根据当前的操作模式将我们网站的设计更改为对暗模式友好。
新标准在 W3C in Media Queries Level 5 注册。
注意:目前仅适用于 Safari Technology Preview Release 68
如果用户偏好是 light
:
/* Light mode */
@media (prefers-color-scheme: light) {
body {
background-color: white;
color: black;
}
}
如果用户偏好是 dark
:
/* Dark mode */
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
如果用户没有偏好,还有选项 no-preference
。但我建议你在这种情况下只使用普通的 CSS 并正确地级联你的 CSS。
编辑(2018 年 12 月 7 日):
在 Safari Technology Preview Release 71 中,他们宣布了 Safari 中的切换开关,以简化测试。我还制作了一个 test page 来查看浏览器行为。
如果您安装了 Safari Technology Preview Release 71,您可以通过以下方式激活:
开发 > 实验功能 > 暗模式 CSS 支持
然后,如果您打开 test page 并打开元素检查器,您就会有一个新图标来切换暗/亮模式。
https://i.stack.imgur.com/z2SYe.png
编辑(2019 年 2 月 11 日):Apple 在新的 Safari 12.1 暗模式下发货
编辑(2019 年 9 月 5 日):目前世界上 25% 的人可以使用深色模式 CSS。来源:caniuse.com 即将推出的浏览器:iOS 13(我猜它将在 Apple 的 Keynote 之后下周发货) EdgeHTML 76(不确定何时发货)
编辑(2019 年 11 月 5 日):目前世界上 74% 的人可以使用深色模式 CSS。资料来源:caniuse.com
编辑(2020 年 2 月 3 日):Microsoft Edge 79 支持暗模式。 (2020 年 1 月 15 日发布)我的建议是:您应该考虑实施暗模式,因为大多数用户现在都可以使用它(对于您网站的夜间用户)。注意:所有主流浏览器现在都支持暗模式,除了:IE、Edge
编辑(2020 年 11 月 19 日):目前世界上 88% 的人可以使用深色模式 CSS。来源:caniuse.com CSS-framework Tailwind CSS v2.0 支持暗模式。 (2020 年 11 月 18 日发布)
编辑(2020 年 12 月 2 日):Google Chrome 将深色主题仿真添加到开发工具中。来源:developer.chrome.com
编辑(2022 年 5 月 2 日):目前世界上 90% 的人可以使用深色模式 CSS。资料来源:caniuse.com
如果你想从 JS 中检测它,你可以使用这个代码:
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// dark mode
}
观察变化:
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
const newColorScheme = e.matches ? "dark" : "light";
});
matchMedia
然后它会尝试匹配 prefers-color-scheme: dark
字符串。如果匹配,我们将处于黑暗模式。
if (window.matchMedia?('(prefers-color-scheme: dark)').matches) { }
addListener
那样跨平台兼容,请参见此处:developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/… 所以应该是:window.matchMedia('(prefers-color-scheme: dark)').addListener(e => { this.darkMode = e.matches; });
Spec 已启动(见上文),可作为媒体查询使用。 Something 已登陆 Safari,另请参阅 here。所以理论上你可以在 Safari/Webkit 中做到这一点:
@media (prefers-dark-interface) { color: white; background: black }
在 MDN 上,CSS 媒体功能 inverted-colors
是 mentioned。插头:我在博客上写过暗模式 here。
inverted-colors
来检测暗模式。 首先,它不起作用。其次,它用于可访问性,而不是美学。一些用户使用倒置模式来增强他们的屏幕对比度,如果他们有视力障碍,这是典型的。请不要更改给定 inverted-colors
的网站的外观,因为它充其量不会按照您的意愿运行,最坏的情况是它会使这些用户感到沮丧。
根据 Mozilla,这是截至 2020 年的首选方法
@media (prefers-color-scheme: dark) {
body {
background: #000;
}
}
@media (prefers-color-scheme: light) {
body {
background: #fff;
}
}
对于 Safari/Webkit,您可以使用
@media (prefers-dark-interface) { background: #000; }
我通过 Mozilla API 进行了搜索,它们似乎没有任何与浏览器窗口颜色相对应的变量。虽然我找到了一个可能对您有所帮助的页面:How to Use Operating System Styles in CSS。尽管有文章标题,但 Chrome 和 Firefox 的颜色不同。
不定期副业成功案例分享
window.matchMedia("(prefers-color-scheme: dark)").matches
如果我有空闲时间,我会在我的答案中添加一个完整的 javascript 解决方案。