78

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

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

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

4

3 回答 3

124

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

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

下拉选择模式

于 2019-12-07T07:22:10.517 回答
7

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

  1. 按 F12 键（或 Mac 上的 Command+Shift+C）
  2. 单击树点符号（自定义和控制 DevTools）
  3. 将鼠标指向更多工具选项，然后单击渲染选项。
  4. 选项 Emulate CSS media feature prefers-color-scheme 接近尾声，这是您的目的地！打开配色方案的愚蠢视觉指南

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

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

耶 ！！！

于 2021-06-06T07:26:44.920 回答
3

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

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

于 2019-08-23T06:28:31.937 回答