Am I Using Dark Mode?
Detect your system color scheme, contrast, and motion preferences
Your System Preference
☀️
LIGHT MODE
Your system is set to an unknown mode
Color Scheme
unknown
How to use in CSS
@media (prefers-color-scheme: dark) {
body { background: #000; color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; }
}How it works
This tool uses CSS media queries via window.matchMedia() to detect your operating system's display preferences. These settings are configured in your device's system preferences (Settings → Display or Accessibility) and are automatically shared with websites so they can adapt their appearance. No data is sent anywhere — detection is entirely client-side.
Frequently Asked Questions
What is dark mode?
Dark mode is a display setting that uses light-colored text and UI elements on a dark background. It reduces eye strain in low-light environments, can save battery on OLED screens, and many users simply prefer how it looks.
How does a website detect dark mode?
Websites detect your color scheme preference using the CSS media query prefers-color-scheme. Your operating system shares this preference with your browser, which makes it available to websites. No special permissions are required.
Can I set dark mode for websites only?
Most browsers follow your system setting, but some browsers (like Firefox and Brave) let you override the color scheme preference independently. Some browser extensions also let you force dark mode on any website regardless of your system setting.
What is prefers-reduced-motion?
prefers-reduced-motion is a system accessibility setting that tells websites to minimize animations and transitions. People with vestibular disorders or motion sensitivity use this to reduce visual movement that can cause discomfort.
What is prefers-contrast?
prefers-contrast indicates whether the user has requested increased or decreased contrast. The "more" setting asks websites to use higher contrast colors for better readability, which is helpful for users with low vision.