Chrome 76增加了对prefers-color-scheme
媒体查询的支持(又名“黑暗模式”)。
但是我怎样才能在两种配色方案中轻松地测试我的网页,而不需要切换系统的黑暗模式呢?
这是Firefox的same question,但我在Chrome和Chrome DevTools中找不到类似的设置。
Chrome 76增加了对prefers-color-scheme
媒体查询的支持(又名“黑暗模式”)。
但是我怎样才能在两种配色方案中轻松地测试我的网页,而不需要切换系统的黑暗模式呢?
这是Firefox的same question,但我在Chrome和Chrome DevTools中找不到类似的设置。
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设置为要调试的值
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内容自动变暗模式(基于颜色反转)
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测试中。
368yc8dk4#
现在您可以在
DevTools > Elements > Styles > Brush icon
(in the upper right corner)中找到设置l0oc07j25#
在Chrome forAndroid上,版本73中添加了一个标志,为深色主题添加了一个设置面板,并在浏览器菜单中添加了一个复选框。
chrome://flags/#darken-websites-checkbox-in-themes-setting