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

Question

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

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

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

Answer 1

由于Chrome版本79，你可以之间切换prefers-color-scheme: dark，并prefers-color-scheme: light从渲染面板

1. 打开开发人员工具（否则下面的组合键会打开打印对话框）
2. 打开命令控制：Ctrl+ Shift+P或Command+ Shift+P（苹果机）
3. 输入“显示渲染”
4. 将Emulate CSS media 功能 preferred-color-scheme设置为您要调试的值

Answer 2

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

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

如何在 Chrome（移动版）上模拟/激活首选颜色方案：

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

耶 ！！！

6 月 22 日编辑：如果您想对任何网站强制使用深色，您可以浏览chrome://flags/并启用标志：Web 内容的自动深色模式（基于颜色反转）

Answer 3

DevTools > Elements > Styles > Brush icon现在您可以在右上角找到设置：