Chrome DevTools: Simulate Media Query Features like prefers-color-scheme

You can simulate Media Query Features, such as prefers-color-scheme and prefers-reduced-motion to properly test that your media queries are behaving as expected.

For example, if your CSS code includes the following:

@media (prefers-color-scheme: dark) {
    .box {
        background: black;
    }
}

You can then trigger a positive match against the prefers-color-scheme: dark Media Query from the DevTools Rendering Pane. To try this out:

1. Open the DevTools Command Menu (Cmd + Shift + P).
2. Search for 'Rendering' and select it.
3. Select prefers-color-scheme: dark (or light) from the prefers-color-scheme select box.

Note:

• Styles are updated without a page refresh.
• The Styles Pane is updated to show any relevant Media Queries which have taken effect.
• There is also the option to simulate the prefers-reduced-motion Media Feature from the Rendering Pane.