How it renders / prefers-color-scheme
How to stop a PDF rendering in dark mode
prefers-color-scheme matches the environment's colour preference, which in a headless render is a default rather than anyone's choice.
What it is for
A document is printed or filed. It has no viewer whose preference should be respected, so it should opt out of the query entirely rather than inheriting whatever the render environment happens to report.
Support: Works everywhere
The query evaluates during a render. What it evaluates to is not something you should depend on, which is the whole point of this entry.
The syntax
Written the way it would appear in a document stylesheet, using prefers-color-scheme as intended.
/* Opt the document out. */
:root {
color-scheme: light;
}
.document {
background: #ffffff;
color: #111111;
}
/* If the app stylesheet is shared, override at the document root rather than
editing the shared dark block, which other surfaces still need. */The mistake people make
Defining colour tokens only inside the dark block, so there is no light value to fall back to. The document then has no colour at all rather than the wrong one.
Frequently asked
Does prefers-color-scheme work when generating a PDF?
Works everywhere. The query evaluates during a render. What it evaluates to is not something you should depend on, which is the whole point of this entry.
How would I know if it were not working?
You would not, from the CSS. Unimplemented and unmatched CSS both fail silently, which is why the reliable test is to set a deliberately extreme value and see whether anything changes. If a 40mm margin looks the same as an 18mm one, the rule is not reaching the page.
Related properties
Things that come up in the same part of a document stylesheet.
How to force background colours to print
print-color-adjust. Works in a browser-based render.
Does @media print apply when generating a PDF
@media print. Works everywhere.
Why position: fixed behaves strangely in a PDF
position: fixed. Works in a browser-based render.
Why images look blurry in the PDF
image-rendering. Works everywhere.
How to put a background or watermark on every PDF page
background on body. Works in a browser-based render.
Every property, with its support status
The full reference, grouped by what part of the page it touches.
Paste the CSS and see what the rendered page does with it.