自动深色主题

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分!

有很多方法可以为您的网站设置 深色模式,但本质上您需要准备好所有样式,并在用户指示他们想要使用它们时应用它们,无论是通过直接选择还是系统级首选项。 如果您的网站没有深色模式,那么它就没有深色模式。

Chrome 正在测试更改这一情况,如果用户在系统级别指示他们偏好深色主题,则强制您的网站使用深色主题。 André Cipriani Bandarra

使用此功能,当用户在操作系统中选择了深色主题时,浏览器会将自动生成的深色主题应用于浅色主题网站。 用户可以通过禁用操作系统级别的选项或在 Chrome 的特定设置中禁用深色主题来选择不使用深色主题。

我认为这有点可怕。 但是,让我们进行测试看看。 他们已将测试此功能的能力直接内置到 Chrome DevTools 中。

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

左侧为模拟深色主题,右侧为正常主题。 😭

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

链接蓝色对我来说太暗了,但除此之外,它让我有点想创建一个真正的深色主题。

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

有点好?

我对它有复杂的感觉。 一方面,用户应该能够控制他们在计算机浏览器中看到的内容。 没有人声称高对比度、颜色反转或减少运动模式等辅助功能不应该存在。 它们直接影响网站渲染。 这可以被视为一项辅助功能。 另一方面,这会导致辅助功能问题(例如:第一张屏幕截图中可见的对比度问题)。

这目前只是一个 Origin Trial,所以我想在它发布之前还有很多时间来解决问题。 但网络非常庞大,所以我想这里的边缘情况绝对是疯狂的,这将非常难以完善。 还不清楚这是否仅仅是 Chrome 在 Android 上的一个功能,还是会传播得更广。 也不清楚如果您的网站有手工制作的深色模式,它是否会保留您的网站,或者它是否仍然会影响设计。 我会使用他们的选择退出机制,直到我能得到正确的信息。