User Preference Media Features Client Hints Header defines a set of HTTP Client Hints headers around user preference media features as defined by Media Queries Level 5. If used as Critical Client Hints, these headers allow servers to make smart choices regarding, e.g., CSS inlining. Sec-CH-Prefers-Color-Scheme reflects the user's prefers-color-scheme preference.
CSS media queries, and specifically user preference media features like `prefers-color-scheme` or `prefers-reduced-motion`, have a potentially significant impact on the amount of CSS that needs to be delivered by a page, and on the experience the user is going to have when the page loads. Focusing on `prefers-color-scheme`—but highlighting that the reasoning applies to other user preference media features as well—it is a best practice to not load CSS for the particular non-matching color scheme in the critical rendering path, and instead to initially only load the currently relevant CSS. One way of doing so is via `<link media>`. However, high-traffic sites like Google Search that wish to honor user preference media features like `prefers-color-scheme` and that inline CSS for performance reasons, need to know about the preferred color scheme (or other user preference media features respectively) ideally at request time, so that the initial HTML payload already has the right CSS inlined. Additionally, and specifically for prefers-color-scheme, sites by all means want to avoid a Flash of inAccurate coloR Theme (FART).
Samples: https://sec-ch-prefers-color-scheme.glitch.me
Explainers: https://github.com/wicg/user-preference-media-features-headers/blob/main/README.md https://wicg.github.io/user-preference-media-features-headers