如何在Chrome中模拟首选配色方案媒体查询？

guz6ccqo 于 2023-03-16 发布在 Go

关注(0)|答案(5)|浏览(197)

Chrome 76增加了对prefers-color-scheme媒体查询的支持（又名“黑暗模式”）。
但是我怎样才能在两种配色方案中轻松地测试我的网页，而不需要切换系统的黑暗模式呢？
这是Firefox的same question，但我在Chrome和Chrome DevTools中找不到类似的设置。

google-chrome

来源：https://stackoverflow.com/questions/57606960/how-can-i-emulate-prefers-color-scheme-media-query-in-chrome

5条答案

按热度按时间

g52tjvyc1#

从Chrome 79版开始，您可以从 * 渲染面板 * 在prefers-color-scheme: dark和prefers-color-scheme: light之间切换
1.打开开发人员工具（否则，下面的组合键将打开打印对话框）
1.打开命令控件：Ctrl+Shift+P或命令+Shift+P（Mac）
1.键入“显示渲染”
1.将模拟CSS媒体功能prefers-color-scheme设置为要调试的值

赞(0）回复(0）举报 2023-03-16

mdfafbf12#

如何在Chrome（桌面版）上模拟/激活首选配色方案：
1.按F12键（或在Mac上按Command+Shift+C）
1.点击树点符号（自定义和控制DevTools）
1.将鼠标指向“更多工具”选项，然后单击“渲染”选项。
1.选项模拟CSS媒体功能首选-颜色-方案接近结束它是你的目标！x1c 0d1x
如何在Chrome（移动的）上模拟/激活首选配色方案：
1.单击树点符号。
1.单击设置。
1.点击主题。
1.选择您想要的选项！
耶！！！
6月22日：如果您想对任何网站强制使用深色，您可以浏览 chrome：//flags/ 并启用标记：Web内容自动变暗模式（基于颜色反转）

赞(0）回复(0）举报 2023-03-16

tquggr8v3#

这是在crbug.com/977243中跟踪的Chrome DevTools功能请求（在错误或CC中加上星号：同时，Safari的Web Inspector中已经提供了该功能，请参阅Apple's blog post中的标题 * 调试暗模式 *。
作为替代方案，如果您希望自动化整个过程，我已经编写了一个Puppeteer script that takes screenshots in dark and light mode，它也可以集成到您的CI测试中。

赞(0）回复(0）举报 2023-03-16

368yc8dk4#

现在您可以在DevTools > Elements > Styles > Brush icon（in the upper right corner）中找到设置

赞(0）回复(0）举报 2023-03-16

l0oc07j25#

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