Demo 3: Emulate CSS preferences

Instructions

Emulate CSS preferences

Chrome/Edge

1. Open this page in Chrome/Edge.
2. Open dev tools.
3. Go to the "Rendering" tab.
   Note: If you don't already have this tab available, click the three dots ("More Tools") next to the "Console" tab and check "Rendering".
4. Make selections for "Emulate CSS media feature prefers-color scheme" and "Emulate CSS media feature prefers-reduced-motion".

Firefox

1. Open this page in Firefox.
2. Open dev tools.
3. Click the sun or moon icon ("Toggle light/dark color scheme simulation for this page").

Activity