Quick developer tools tip: simulating dark/light colour mode

Newer operating systems come with a dark/light mode option and also a “prefers reduced motion” mode. This also affects our products and we should test them in these modes to make sure there is no glaring problem. There is also a high contrast mode in Windows which is an accessibility feature that should be on our radar to test for.

Now, to avoid having to change your whole OS to test for this, browser developer tools have simulators for these modes.

In Microsoft Edge, these are in the “more tools” section.

Here’s the journey;

  • Click the “…”
  • Select “More tools”
  • Select “Rendering”
  • In the lower console, scroll down to “Emulate CSS media feature prefers-color-scheme” and toggle. Here’s a screencast showing it in action .

keyboard access to simulator

This is not a Microsoft Edge specific functionality, any Chromium based browser has this.

Do you have any idea how to make this even easier? Please report issues you find using the feedback tool in the developer tools:

Feedback mechanism in developer tools

You can also always ping me @ codepo8 or the official Microsoft Edge Devtools account @ EdgeDevTools on Twitter.