Skip to content

Commit 20a7101

Browse files
committed
[css-color-adjust-1] Re-add only, per WG resolution and the proposal in w3c#5089
1 parent d029b05 commit 20a7101

File tree

1 file changed

+80
-24
lines changed

1 file changed

+80
-24
lines changed

css-color-adjust-1/Overview.bs

Lines changed: 80 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@ spec:fill-stroke-3; type:property;
2323
text:stroke
2424
</pre>
2525

26+
<pre class=anchors>
27+
url: https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme;
28+
type: attr-value; for: meta/name; spec: html; text: color-scheme;
29+
</pre>
30+
2631
Introduction {#intro}
2732
=====================
2833

@@ -128,7 +133,7 @@ Opting Into a Preferred Color Scheme: the 'color-scheme' property {#color-scheme
128133

129134
<pre class=propdef>
130135
Name: color-scheme
131-
Value: normal | [ light | dark | <<custom-ident>> ]+
136+
Value: normal | [ light | dark | <<custom-ident>> ]+ && only?
132137
Initial: normal
133138
Applies to: all elements and text
134139
Inherited: yes
@@ -158,20 +163,22 @@ Opting Into a Preferred Color Scheme: the 'color-scheme' property {#color-scheme
158163
<dl dfn-type=value dfn-for=color-scheme>
159164
: <dfn>normal</dfn>
160165
::
161-
Indicates that the element isn't aware of [=color schemes=] at all,
166+
Indicates that the element doesn't support [=color schemes=] at all,
162167
and so the element should be rendered with the browser's default [=color scheme=].
163168

164169
(This is typically, tho not always, similar to ''light''.)
165170

166171
: <dfn>light</dfn>
167172
::
168-
Indicates that the page can handle the element being rendered
169-
in a [=light color scheme=].
173+
Indicates that the element supports a [=light color scheme=].
170174

171175
: <dfn>dark</dfn>
172176
::
173-
Indicates that the page can handle the element being rendered
174-
in a [=dark color scheme=].
177+
Indicates that the element supports a [=dark color scheme=].
178+
179+
: <dfn>only</dfn>
180+
::
181+
Forbids the user agent from [=overriding the color scheme=] for the element.
175182

176183
: <dfn><<custom-ident>></dfn>
177184
::
@@ -187,7 +194,7 @@ Opting Into a Preferred Color Scheme: the 'color-scheme' property {#color-scheme
187194
authoring tutorials and references
188195
should omit <<custom-ident>> from their materials.
189196

190-
The ''color-scheme/normal'', ''light'', and ''dark'' keywords
197+
The ''color-scheme/normal'', ''light'', ''dark'', and ''only'' keywords
191198
are not valid <<custom-ident>>s in this property.
192199
</dl>
193200

@@ -199,20 +206,31 @@ Opting Into a Preferred Color Scheme: the 'color-scheme' property {#color-scheme
199206
To ensure particular foreground or background colors,
200207
they need to be specified explicitly.
201208

202-
If the user's [=preferred color scheme=],
203-
as indicated by the 'prefers-color-scheme' media feature,
204-
is present among the listed [=color schemes=],
205-
and is supported by the user agent,
206-
that's the element's [=used color scheme=].
207-
208-
Otherwise,
209-
if the user agent supports at least one of the listed [=color schemes=],
210-
the [=used color scheme=] is
211-
the first supported [=color scheme=] in the list.
212-
213-
Otherwise,
214-
the [=used color scheme=] is the browser default.
215-
(Same as ''color-scheme/normal''.)
209+
<div algorithm>
210+
To <dfn noexport>determine the used color scheme</dfn> of an element:
211+
212+
1. If the user's [=preferred color scheme=],
213+
as indicated by the 'prefers-color-scheme' media feature,
214+
is present among the listed [=color schemes=],
215+
and is supported by the user agent,
216+
that's the element's [=used color scheme=].
217+
218+
2. Otherwise,
219+
if the user has indicated an overriding preference for their chosen color scheme,
220+
and the ''only'' keyword is not present in 'color-scheme' for the element,
221+
the user agent must [=override the color scheme=]
222+
with the user's [=preferred color scheme=].
223+
See [[#color-scheme-override]].
224+
225+
3. Otherwise,
226+
if the user agent supports at least one of the listed [=color schemes=],
227+
the [=used color scheme=] is
228+
the first supported [=color scheme=] in the list.
229+
230+
4. Otherwise,
231+
the [=used color scheme=] is the browser default.
232+
(Same as ''color-scheme/normal''.)
233+
</div>
216234

217235
Note: User agents are <strong>not required</strong>
218236
to support any particular [=color scheme=],
@@ -347,6 +365,44 @@ Effects of the Used Color Scheme {#color-scheme-effect}
347365
more invasive changes might be applied;
348366
see [[#forced]].
349367

368+
Overriding the Color Scheme {#color-scheme-override}
369+
---------------------------
370+
371+
If the user has indicated an <em>overriding</em> preference for a particular color scheme,
372+
and the author has not disallowed this (by using the ''only'' keyword),
373+
the user agent may <dfn>override the color scheme</dfn>,
374+
forcing the [=used color scheme=] to the user's [=preferred color scheme=].
375+
If the element does not support that [=color scheme=],
376+
the user agent must also auto-adjust other colors into this chosen [=color scheme=],
377+
such as by inverting their brightness,
378+
while preserving any color contrast necessary for readability of the page.
379+
In this case, UA may also auto-adjust colors within replaced elements, background images, and other external resources as appropriate.
380+
381+
Note: The specifics of such auto-adjustments are UA-defined,
382+
and can differ from UA to UA.
383+
But it is not intended to force all colors into a fixed palette,
384+
as [=forced colors mode=] does,
385+
only to force all colors on the page
386+
to conform to either a [=dark=] or [=light=] color scheme.
387+
388+
<div class="example">
389+
For example, a UA might have a “dark room” mode,
390+
which forces all pages into a [=dark=] color scheme.
391+
392+
For pages that already support [=dark=] color schemes,
393+
and have indicated so using the 'color-scheme' property
394+
or <{meta/name/color-scheme}> <{meta}> name,
395+
this has no effect other than reporting a ''@media/prefers-color-scheme/dark'' value
396+
for the 'prefers-color-scheme' [=media query=]
397+
and selecting a [=dark=] [=used color scheme=].
398+
399+
But for pages that do not explicitly support a [=dark=] color scheme,
400+
and have not explicitly forbidden this auto-adjustment
401+
by specifying ''color-scheme: only light'',
402+
this mode triggers auto-adjustment of the page’s colors
403+
to <em>force</em> the page to conform to the desired [=dark=] color scheme.
404+
</div>
405+
350406

351407
<!--
352408
████████ ███████ ████████ ██████ ████████ ████████
@@ -358,8 +414,8 @@ Effects of the Used Color Scheme {#color-scheme-effect}
358414
██ ███████ ██ ██ ██████ ████████ ████████
359415
-->
360416

361-
Forced Color Schemes {#forced}
362-
====================
417+
Forced Color Palettes {#forced}
418+
=====================
363419

364420
<dfn export>Forced colors mode</dfn> is an accessibility feature
365421
intended to increase the readability of text through color contrast.
@@ -498,7 +554,7 @@ Properties Affected by Forced Colors Mode {#forced-colors-properties}
498554
UAs may further tweak these <a>forced colors mode</a> heuristics
499555
to provide better user experience.
500556

501-
Opting Out of a Forced Color Scheme: the 'forced-color-adjust' property {#forced-color-adjust-prop}
557+
Opting Out of a Forced Color Palette: the 'forced-color-adjust' property {#forced-color-adjust-prop}
502558
-----------------------------------------------------------------
503559

504560
<pre class=propdef>

0 commit comments

Comments
 (0)