如何在 Chrome 中模拟 prefers-color-scheme 媒体查询？

Question

Chrome 76 添加了对 prefers-color-scheme 媒体查询 (a.k.a. "dark mode") 的支持。

但是，如何在不打开和关闭系统暗模式的情况下轻松地测试两种配色方案的网页？

这是 Firefox 的 same question，但我在 Chrome & Chrome DevTools 中找不到类似的设置。

Answer 1

这是在 crbug.com/977243 (star the bug or CC: yourself to be notified of progress). Meanwhile, it's already available in Safari's Web Inspector, see the heading Debugging Dark Mode in Apple's blog post 中跟踪的 Chrome DevTools 功能请求。

作为替代方案，如果你想自动化整个过程，我写了一个Puppeteer script that takes screenshots in dark and light mode，它也可以集成到你的CI测试中。

Answer 2

从 Chrome 版本 79 开始，您可以从 渲染面板

在 prefers-color-scheme: dark 和 prefers-color-scheme: light 之间切换

1. 打开开发者工具（否则下面的组合键会打开打印对话框）
2. 打开命令控制：Ctrl+Shift+P或命令+Shift+P (Mac)
3. 键入“显示渲染”
4. 将 Emulate CSS 媒体功能 prefers-color-scheme 设置为您要调试的值

Answer 3

如何在 Chrome（桌面）上 emulate/activate 偏好配色方案：

1. 按 F12 键（或在 Mac 上按 Command+Shift+C）
2. 单击树点符号（自定义和控制 DevTools）
3. 将鼠标指向更多工具选项，然后单击渲染选项。
4. 选项 Emulate CSS media feature prefers-color-scheme 接近尾声它就是你的目的地！

如何在 Chrome（移动设备）上 emulate/activate 偏好配色方案：

1. 点击树点符号。
2. 点击设置。
3. 点击主题。
4. Select 您想要的选项！

赞！！！

Answer 4

在 Chrome for Android 上，在版本 73 中添加了一个标志，它为深色主题添加了一个设置面板，并在浏览器菜单。 chrome://flags/#darken-websites-checkbox-in-themes-setting