css - How can I emulate prefers-color-scheme media query in Chrome?

Question

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.

Answer 1

Since Chrome version 79 you can toggle between prefers-color-scheme: dark and prefers-color-scheme: light from the Rendering panel

1. Open Developer tools (otherwise the key combination below opens the print dialog)
2. Open the Command Control: Ctrl+Shift+P or Command+Shift+P (Mac)
3. Type "Show rendering"
4. Set the Emulate CSS media feature prefers-color-scheme to the value you want to debug