有很多方法可以为您的网站设置 深色模式,但本质上您需要准备好所有样式,并在用户指示他们想要使用它们时应用它们,无论是通过直接选择还是系统级首选项。 如果您的网站没有深色模式,那么它就没有深色模式。
Chrome 正在测试更改这一情况,如果用户在系统级别指示他们偏好深色主题,则强制您的网站使用深色主题。 André Cipriani Bandarra
使用此功能,当用户在操作系统中选择了深色主题时,浏览器会将自动生成的深色主题应用于浅色主题网站。 用户可以通过禁用操作系统级别的选项或在 Chrome 的特定设置中禁用深色主题来选择不使用深色主题。
我认为这有点可怕。 但是,让我们进行测试看看。 他们已将测试此功能的能力直接内置到 Chrome DevTools 中。

快速看一下我自己的网站...

主页看起来很糟糕,因为它没有翻转显式白色背景颜色。 不确定为什么,因为它在文章页面上看起来好多了

众所周知,WordPress 管理员没有深色模式,所以这里看看它的效果

我对它有复杂的感觉。 一方面,用户应该能够控制他们在计算机浏览器中看到的内容。 没有人声称高对比度、颜色反转或减少运动模式等辅助功能不应该存在。 它们直接影响网站渲染。 这可以被视为一项辅助功能。 另一方面,这会导致辅助功能问题(例如:第一张屏幕截图中可见的对比度问题)。
这目前只是一个 Origin Trial,所以我想在它发布之前还有很多时间来解决问题。 但网络非常庞大,所以我想这里的边缘情况绝对是疯狂的,这将非常难以完善。 还不清楚这是否仅仅是 Chrome 在 Android 上的一个功能,还是会传播得更广。 也不清楚如果您的网站有手工制作的深色模式,它是否会保留您的网站,或者它是否仍然会影响设计。 我会使用他们的选择退出机制,直到我能得到正确的信息。
我同意你的观点,自动深色主题确实存在问题。
最初我以为 Chrome 会对颜色进行基本反转,但它似乎更高级(因此,更不可靠)。 反转非常具有选择性; 例如,如果我的背景是青绿色,它奇怪地不会将其转换为深绿色(或某种深灰色)。
无论如何,说到自动深色模式,我发现 Aral Balkan 的解决方法非常有趣:CSS 过滤器。 https://ar.al/2021/08/24/implementing-dark-mode-in-a-handful-of-lines-of-css-with-css-filters/ 有点偷懒,但它似乎确实产生了更好的视觉效果 :)
DarkReader(Chrome 扩展程序)在这方面效果非常好。 在 Android 上没有这个功能非常令人讨厌——Chrome 以前允许它,而且效果很差(如上所述),但它比在晚上被强光照射要好。
我认为,几年后,很大一部分用户将像我现在这样设置:日落后使用深色模式,日出后使用浅色模式。
作为一名用户,我更喜欢大多数情况下使用深色模式,如果深色模式更普遍,我不会生气。 我只是希望这不会引入随机性,因为每个浏览器都会带来自己的独特且自然不完美的启发式方法。 我们在电子邮件客户端中已经有了这种深色模式的情况,它并不美观,但有时很有趣。 但我相信这种担忧是毫无根据的,因为作者似乎拥有 这些符合标准的方式 来确保他们的意图得到尊重。
哦,我的天哪,非常感谢你,你改变了我的生活……我通过 Google Discover 找到了这个……我已经使用 Dark Reader 扩展程序将近十年了,它一直有点太重了……终于,它被内置到 Chrome 中(尽管隐藏在开发者工具中)!!! 非常感谢你分享
试过了。 看起来是一个很酷的功能,但 Chrome 扩展程序 https://chrome.google.com/webstore/detail/eimadpbcbfnmbkopoojfekhnkhdbieeh 更好。
简单的深色模式算法
这对图像、视频或其他媒体元素不利。