A user agent may provide a user preferred color scheme which is the result of the user selecting that scheme within the user agent itself, or based on the color scheme selected in the UAs environment like an operating system. This preferred scheme is used to evaluate the prefers-color-scheme media feature. This specification introduces a supported-color-schemes property to affect UA specific rendering on a per element basis.
The prefers-color-scheme media query is not affected by the used color scheme as that would have introduced a circular dependency. Similarly, the used scheme does not result in a different UA stylesheet, but the other computed or used values may.
How the UA decides upon the preferred color scheme is out of scope for this specification.
|Applies to:||all elements|
|Computed value:||see prose|
|Canonical order:||per grammar|
|Animation type:||not animatable|
If the specified value only contains unsupported color schemes, the computed value is light. Otherwise, the computed value is the specified value with unsupported and duplicate color schemes removed.
Note: The rationale behind specifying computed and used style (below) like this is to have to store as little as possible (bitset of supported schemes) while not having to recreate computed styles on preferred color scheme changes.
<color-scheme> = light | dark | <custom-ident>
The UA provides a preferred color scheme which is used to evaluate the prefers-color-scheme media feature. For the following, a preferred color scheme of no-preference maps to light. The supported-color-schemes and the preferred color scheme resolves to a used color scheme per element as follows:
Does it make sense to allow multiple color schemes before only?
The UA should take the used color scheme into account when rendering the default page background, form controls, the default selection color, and other UA-controlled UI like misspelling underlines.
When the canvas background is not opaque, a UA dependent background is seen behind the canvas. This background should be dark instead of light when the used color scheme for the root element of the top level document is dark.
Should the spec say white/black instead of light/dark? Probably not since this is defined as UA dependent?
Note: The background color of the canvas is typically transparent. Changing the UA background behind the canvas allows for iframes to still be transparent by default when both the parent document and the iframe uses a dark theme.
The UA stylesheet should include a named color, not exposed to authors, specified on :root. This
named color computes to the same computed value as the initial value of color when the resolved
theme for the element is light, and
rgb(255, 255, 255) for dark.
Making the computed value of a color relying on the used color theme could be an issue.