Dark Mode & Display Test

Operating systems expose an appearance setting — light, dark or an automatic schedule — and browsers pass it to every page as a CSS media query called prefers-color-scheme. No permission is involved and no prompt appears. A page can read it in CSS with a single rule, or in JavaScript through window.matchMedia, which is what the panel above does.

The query answers one of three ways: dark, light, or neither, when the browser declines to report a preference. Every modern browser reports the setting the operating system hands it — the Windows Choose your mode setting, the macOS Appearance pane, or the equivalent on Android, iOS and the Linux desktops that expose one.

The same mechanism carries three settings that exist for accessibility rather than aesthetics. prefers-reduced-motion reports that you have asked interfaces to avoid animation, and a well-built page responds by dropping transitions and parallax. prefers-contrast reports a request for more or less contrast than the default, with custom as a third answer on systems that let you tune it yourself.

Two more report states rather than preferences. forced-colors becomes active when Windows High Contrast mode is on and the browser is overriding page colours with a system palette — at which point a site's careful colour choices are replaced wholesale. inverted-colors reports a system-level colour inversion, which is worth checking for, because images and shadows look wrong under it. Support is uneven. The transparency and inversion queries are reported by Safari, and most other browsers do not implement them at all, so on a typical Windows machine those two rows read No preference and None no matter what you have configured elsewhere.

Three queries describe the panel rather than your settings. color-gamut reports whether the display can show srgb, p3 or rec2020 colours, and a browser answers with the widest range it can actually use — a P3-capable MacBook reports p3 for both the p3 and srgb queries, because P3 contains sRGB.

dynamic-range answers standard or high, separating an ordinary SDR panel from one the system has recognised as HDR-capable. screen.colorDepth, reported above, is the older read-out: it is 24 on essentially every modern display, and its companion pixelDepth returns the same figure. None of these values can be changed from a web page — they describe hardware, and the browser simply reports what the operating system tells it.

A page cannot change your theme, and it cannot tell what colours are actually on your screen. All it knows is what you declared. If you run a dark-mode browser extension that repaints every site, the media query still reports whatever your operating system says, so the answer above may disagree with what you are looking at.

Coverage is uneven, too. A query a browser does not implement simply evaluates to false rather than throwing, so No preference may mean either that you have not set the preference or that your browser cannot answer the question. On the display side, dynamic-range is newer than the rest and is not supported everywhere, so an SDR reading on an HDR-capable screen is a limitation of the browser rather than a fact about your hardware.

One related mechanism is worth knowing because it is often confused with the media query. The CSS color-scheme property lets a page tell the browser which schemes it is prepared to render, and the browser then draws its own furniture — scrollbars, form fields, the canvas behind the page — to match. It reads the same system setting but changes nothing about what the media query reports, and it is a request from the page rather than a measurement of your machine.

On its own, a dark-mode flag is nearly worthless as an identifier, since hundreds of millions of people share it. Its value to a tracker is as a tie-breaker: when two visitors otherwise look identical, one small preference can separate them. That is the pattern across every signal on this site, and it is why fingerprinting is measured as a whole rather than signal by signal.

The display capabilities are the more informative half. Gamut plus dynamic range plus colour depth narrows down the panel, and combined with the ratio and resolution in the device pixel ratio test and the screen resolution test, it describes a fairly specific machine. The browser fingerprint test shows what that amounts to overall.