/dev tips

(210) My Experience with Buddy CI Request Initiator Pane (212)

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

3rd December 2019
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:

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.