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

Question

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

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

这是 Firefox 的 相同问题，但我在 Chrome 和 Chrome DevTools 中找不到类似的设置。

原文由 xmcp 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

从 Chrome 版本 79 开始，您可以从“ 渲染”面板 在 prefers-color-scheme: dark 和 prefers-color-scheme: light 之间切换

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

原文由 AV Paul 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是在 crbug.com/977243 中跟踪的 Chrome DevTools 功能请求（给错误加注星标或 CC：您自己会收到进度通知）。同时，它已经在 Safari 的 Web Inspector 中可用，请参阅 Apple 博客文章中的 Debugging Dark Mode 标题。

作为替代方案，如果您想自动化整个过程，我编写了一个 Puppeteer 脚本，该脚本可以在深色和浅色模式下截屏，也可以将其集成到您的 CI 测试中。

原文由 DenverCoder9 发布，翻译遵循 CC BY-SA 4.0 许可协议