Dark Mode Detector
Detect whether your system prefers dark or light mode, plus accessibility settings.
How to use this tool
- Open this page — it runs instantly in your browser, no signup or install.
- Allow any permission prompt if asked; everything stays on your device.
- Use the on-screen controls — results update live.
Detect whether your system prefers dark or light mode, plus accessibility settings.
How it works
This tool uses the CSS media query prefers-color-scheme and the JavaScript window.matchMedia API to detect whether your operating system or browser is currently configured to prefer dark mode or light mode. It also checks prefers-reduced-motion and prefers-contrast where supported, giving a broader picture of your accessibility preferences as seen by websites.
The result reflects your OS-level system preference — the same preference that web pages use to automatically switch between dark and light themes. If you have a browser-level override set, that takes precedence over the OS setting.
Developers can use this tool to quickly verify that a system theme preference is being exposed correctly to the browser, and users can use it to understand why a website is (or is not) displaying in dark mode.
Worked example
Debug why a website is not following your dark mode preference
- Enable dark mode in your OS settings.
- Open this tool and confirm it reports 'Dark' for color scheme preference.
- Open the website that is not responding to your preference.
- If the tool shows Dark but the site stays light, the site does not implement prefers-color-scheme.
You confirm the OS preference is correctly detected by the browser, which means the website itself does not yet support automatic dark mode switching.
Common mistakes to avoid
- Changing the browser's theme (e.g., a dark browser skin) and expecting it to flip the prefers-color-scheme value — only the OS-level dark mode setting affects this.
- Assuming prefers-reduced-motion being set means dark mode is also set — they are independent preferences.
- Testing on a device where a power-saver mode has automatically switched to dark mode without realizing it.
Key terms
- prefers-color-scheme
- A CSS media feature that reflects the user's OS preference for dark or light color themes.
- prefers-reduced-motion
- A CSS media feature that indicates the user has requested minimal animation, often set by users with vestibular disorders.
- window.matchMedia
- A JavaScript API that evaluates CSS media queries and returns a live result that updates when the condition changes.
Frequently asked questions
- I set dark mode on my phone but the tool shows 'Light' — why?
- Some browsers override or ignore the OS setting. Check your browser's own display/appearance settings for a theme override.
- Can websites read my dark mode preference without my consent?
- Yes — prefers-color-scheme is a standard CSS media feature accessible to any website you visit, similar to screen size.
- Does this tool detect my wallpaper or custom theme color?
- No. It only reads the dark/light preference, not specific accent colors or wallpapers.