如何在 Chrome 中模拟偏好颜色方案媒体查询？

Posted 2023-03-06

【中文标题】如何在 Chrome 中模拟偏好颜色方案媒体查询？

【英文标题】：How can I emulate prefers-color-scheme media query in Chrome?

【发布时间】：2019-12-27 15:18:24

【问题描述】：

Chrome 76 增加了对 prefers-color-scheme 媒体查询（又名“暗模式”）的支持。

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

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

【参考方案1】：

如何在 Chrome（桌面）上模拟/激活首选颜色方案：

按 F12 键（或 Mac 上的 Command+Shift+C） 点击树点符号（自定义和控制 DevTools） 将鼠标指向更多工具选项，然后单击渲染选项。 “模拟 CSS 媒体功能”选项在接近尾声时首选颜色方案，这是您的目的地！

如何在 Chrome（移动）上模拟/激活偏好颜色方案：

点击树点符号。 点击设置。 点击主题。 选择您想要的选项！

耶！！！

【参考方案2】：

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

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

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

【讨论】：

CMD+SHIFT+P 对我不起作用，只需在命令行中按 Esc .. 或三点菜单、更多工具、渲染

谢谢！我当之无愧的 +1 ;)（适用于 Win atm）

谢谢@luky，我有一个扩展阻止了Cmd + Shift + P 快捷方式

【参考方案3】：

这是在 crbug.com/977243 中跟踪的 Chrome DevTools 功能请求（给错误加注星标或抄送：您自己会收到进度通知）。同时，它已经在 Safari 的 Web Inspector 中可用，请参阅 Apple's blog post 中的标题调试暗模式。

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