What is prefers-color-scheme?

prefers-color-scheme is the CSS media feature that tells websites whether you want a dark or a light theme. Browsers take it from your system's dark mode setting on Windows, macOS, Linux, Android or iOS, and sites switch their colors with @media (prefers-color-scheme: dark) in CSS or window.matchMedia("(prefers-color-scheme: dark)") in JavaScript. If a site stays light while your system is dark, the first thing to check is what your browser actually reports.

Tool description

This tool shows your system theme in one big block: Dark with a moon, or Light with a sun. It asks your browser whether prefers-color-scheme: dark matches and listens for changes, so when you switch between dark and light mode in your device settings, the result updates right away without a reload. Anything not reported as dark shows as Light.

The answer is what your browser tells websites, which isn't always your system setting. Firefox, for example, has a Website appearance setting that can make every site light or dark whatever the system uses.

Features

  • Shows Dark or Light at a glance
  • Updates live when you change your system theme
  • Runs in your browser, with nothing to install