问题
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.
回答1:
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
回答2:
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.
来源：https://stackoverflow.com/questions/57606960/how-can-i-emulate-prefers-color-scheme-media-query-in-chrome