Menu
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.
223
The prefers-color-scheme CSS media feature indicates if the user prefers light or dark color scheme. Under the Emulate CSS media feature prefers-color-scheme, select one of the following from the dropdown list: refresh Reload the page. For example: The print media query controls how your page looks when printed.
Under the Emulate CSS media feature prefers-color-scheme, select one of the following from the dropdown list: refresh Reload the page. For example: The print media query controls how your page looks when printed. Open the Rendering tab and under Emulate CSS media type select print.
The print media query controls how your page looks when printed. Open the Rendering tab and under Emulate CSS media type select print. From here, you can view and change your CSS, like any other web page.
The prefers-reduced-motion CSS media feature indicates if the user has requested to minimize the amount of motion on a page. Open the Rendering tab on this demo and try scrolling to see various animations. Under the Emulate CSS media feature prefers-reduced-motion, select prefers-reduced-motion:reduce.
Since Chrome version 79 you can toggle between prefers-color-scheme: dark and prefers-color-scheme: light from the Rendering panel
53
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
