如何在 Chrome 中模拟偏好配色方案的媒体查询？

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.

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

How to emulate/activate prefers-color-scheme on Chrome (Desktop):

1. Press F12 key (or Command+Shift+C on Mac)
2. Click on the tree dots symbol (customize and control DevTools)
3. Point your mouse on the more tools option, and then click in rendering option.
4. 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):

1. Click on the tree dots symbol.
2. Click on Settings.
3. Click on theme.
4. Select you desired option !

Yay !!!

Edit June/22: If you want force dark colors to any website, you can browse chrome://flags/ and enable the flag: Auto Dark Mode for Web Contents (color inversion based)

On Chrome for Android, a flag was added in version 73 that adds a settings panel for dark theme, plus a checkbox for it in the browser menu. chrome://flags/#darken-websites-checkbox-in-themes-setting