prefers-reduced-motion & color-scheme Helper
Generate CSS and JS scaffolding for prefers-reduced-motion and prefers-color-scheme plus a manual test checklist.
About this tool
A scaffolding generator for the prefers-reduced-motion and prefers-color-scheme media features. Choose one or both features and it emits ready-to-paste CSS (with sensible reduced-motion and dark-mode defaults), a window.matchMedia JavaScript snippet that reacts to live preference changes, and a checklist of where to toggle each setting in the OS and DevTools. Built for front-end developers implementing accessible motion and theming.
Frequently asked questions
What does prefers-reduced-motion do?
It's a CSS media feature that's true when the user has asked their OS to minimize animation. Wrap non-essential animations and transitions in @media (prefers-reduced-motion: reduce) so they're toned down for those users.
How do I detect dark mode in JavaScript?
Use window.matchMedia('(prefers-color-scheme: dark)'). Read .matches for the current value and add a 'change' event listener so your UI reacts when the user switches their system theme. This tool generates that snippet for you.
How do I test these preferences without changing my OS settings?
Open Chrome DevTools, go to the Rendering panel, and use the 'Emulate CSS prefers-reduced-motion' and 'Emulate CSS prefers-color-scheme' dropdowns. The tool's checklist also lists the OS-level toggles for macOS, Windows, iOS, and Android.