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.

Just in case anyone is as daft as I was: changing the system setting also works great. — Daniel Darabos, Aug 17 '23 at 10:49

score 196 · Accepted Answer · edited Aug 02 '20 at 16:00

196

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

edited Aug 02 '20 at 16:00

randers

5,031
5
37
64

answered Dec 07 '19 at 07:22

AV Paul

2,299
1
9
11

15

CMD+SHIFT+P doesn't work for me, just pres Esc in the command line.. or three dots menu, More Tools, Rendering – luky Sep 16 '20 at 13:34
1

Thanks @luky, I had an extension blocking the `Cmd` + `Shift` + `P` shortcut – Simon Arnold Sep 06 '21 at 15:17

Marlon da Veiga · Answer 2 · 2022-06-13T05:17:01.520

21

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

Press F12 key (or Command+Shift+C on Mac)
Click on the tree dots symbol (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 symbol.
Click on Settings.
Click on theme.
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)

edited Jun 13 '22 at 05:17

answered Jun 06 '21 at 07:26

Marlon da Veiga

440
5
7

1

good, nice, but it only works while having the inspector open? – panchicore Sep 05 '22 at 08:26
I don't see how "Auto Dark Mode for Web Contents" is the same or as good as prefers-color-scheme media query. Auto dark mode automatically tries to render websites in dark (and it often looks terrible if there is no real dark mode) while the media query only works if the website has proper dark mode implemented. – LZ_ Jan 20 '23 at 23:23

score 4 · Answer 3 · edited Jun 02 '23 at 09:46

4

Now you can find the settings in DevTools > Elements > Styles > Brush icon, in the upper right corner:

edited Jun 02 '23 at 09:46

Destroy666

892
12
19

answered Mar 14 '23 at 10:03

Ameliance SkyMusic

41
3

FF has dedicated button at about same place `Inspect` ---> `Styles section` --> – angularrocks.com Jul 03 '23 at 12:05

score 2 · Answer 4 · answered Aug 23 '19 at 06:28

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.

score -1 · Answer 5 · answered Mar 31 '22 at 14:40

-1

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

answered Mar 31 '22 at 14:40

Scott Martin

1,260
2
17
27

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

5 Answers5

Linked