0
241
VisualizaçõesHow can I emulate prefers-color-scheme media query in Chrome?
Chrome 76 has added support for prefers-color-scheme media query (a.k.a. "dark mode").
But how can I test my webpage in both color schemes easily, without toggling the system dark mode on and off?
Here is the same question for Firefox, but I can't find similar settings in Chrome & Chrome DevTools.
3 Respostas
Responde à pergunta0
Since Chrome version 79 you can toggle between prefers-color-scheme: dark and prefers-color-scheme: light from the Rendering panel
- Open Developer tools (otherwise the key combination below opens the print dialog)
- Open the Command Control: Ctrl+Shift+P or Command+Shift+P (Mac)
- Type "Show rendering"
- Set the Emulate CSS media feature prefers-color-scheme to the value you want to debug
0
This is a Chrome DevTools feature request that is tracked in crbug.com/977243 (star the bug or CC: yourself to be notified of progress). Meanwhile, it's already available in Safari's Web Inspector, see the heading Debugging Dark Mode in Apple's blog post.
As an alternative, if you want to automate the whole process, I have written a Puppeteer script that takes screenshots in dark and light mode, which can also be integrated in your CI testing.
0
How to emulate/activate prefers-color-scheme on Chrome (Desktop):
- Press F12 key (or Command+Shift+C on Mac)
- Click on the tree dots simbol (customize and control DevTools)
- Point your mouse on the more tools option, and then click in rendering option.
- the option Emulate CSS media feature prefers-color-scheme near the end it's your destination !
How to emulate/activate prefers-color-scheme on Chrome (Mobile):
- Click on the tree dots simbol.
- Click on Settings.
- Click on theme.
- Select you desired option !
Yay !!!