Emulate color schemes

Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.

Categories: Supported by:

Emulate color schemes

In CSS, you can use the prefers-color-scheme media feature (docs) to detect if the user prefers using a light or a dark theme in their operating system. This is useful to style your website in a way that better blends with the rest of the operating system and respects the user's preference.

However, it can be a pain to test since you have to go in the operating system's settings and change the theme there. This can be slow and you might not actually want to change your entire theme just to test a website.

DevTools to the rescue! With DevTools, you can emulate a different color scheme just for the inspected page. All browsers support it, but it's slightly different in each one of them.

See also