Instantly detect if your browser or OS is set to dark mode or light mode. Check your prefers-color-scheme media query.
Dark mode is a display setting that uses light-colored text on dark backgrounds. It reduces eye strain in low-light environments and can significantly reduce battery usage on OLED displays (by up to 30–60% at full brightness).
Most operating systems and browsers expose your preference via the CSS media query prefers-color-scheme: dark, which websites use to automatically switch their color theme.
Browsers expose your OS theme preference through the CSS media query prefers-color-scheme. JavaScript reads this to automatically adapt page colors. This works without IP or GPS data, reading directly from your OS display settings.
On OLED and AMOLED displays (most modern smartphones), dark mode reduces battery consumption by 20-60% at high brightness because black pixels are completely off on OLED. On LCD displays the backlight stays on regardless, so dark mode offers minimal battery benefit.