@@ -23,6 +23,11 @@ spec:fill-stroke-3; type:property;
23
23
text:stroke
24
24
</pre>
25
25
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
+
26
31
Introduction {#intro}
27
32
=====================
28
33
@@ -128,7 +133,7 @@ Opting Into a Preferred Color Scheme: the 'color-scheme' property {#color-scheme
128
133
129
134
<pre class=propdef>
130
135
Name : color-scheme
131
- Value : normal | [ light | dark | <<custom-ident>> ]+
136
+ Value : normal | [ light | dark | <<custom-ident>> ]+ && only?
132
137
Initial : normal
133
138
Applies to : all elements and text
134
139
Inherited : yes
@@ -158,20 +163,22 @@ Opting Into a Preferred Color Scheme: the 'color-scheme' property {#color-scheme
158
163
<dl dfn-type=value dfn-for=color-scheme>
159
164
: <dfn>normal</dfn>
160
165
::
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,
162
167
and so the element should be rendered with the browser's default [=color scheme=] .
163
168
164
169
(This is typically, tho not always, similar to ''light'' .)
165
170
166
171
: <dfn>light</dfn>
167
172
::
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=] .
170
174
171
175
: <dfn>dark</dfn>
172
176
::
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.
175
182
176
183
: <dfn><<custom-ident>></dfn>
177
184
::
@@ -187,7 +194,7 @@ Opting Into a Preferred Color Scheme: the 'color-scheme' property {#color-scheme
187
194
authoring tutorials and references
188
195
should omit <<custom-ident>> from their materials.
189
196
190
- The ''color-scheme/normal'' , ''light'' , and ''dark '' keywords
197
+ The ''color-scheme/normal'' , ''light'' , ''dark'' , and ''only '' keywords
191
198
are not valid <<custom-ident>> s in this property.
192
199
</dl>
193
200
@@ -199,20 +206,31 @@ Opting Into a Preferred Color Scheme: the 'color-scheme' property {#color-scheme
199
206
To ensure particular foreground or background colors,
200
207
they need to be specified explicitly.
201
208
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>
216
234
217
235
Note: User agents are <strong> not required</strong>
218
236
to support any particular [=color scheme=] ,
@@ -347,6 +365,44 @@ Effects of the Used Color Scheme {#color-scheme-effect}
347
365
more invasive changes might be applied;
348
366
see [[#forced]] .
349
367
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
+
350
406
351
407
<!--
352
408
████████ ███████ ████████ ██████ ████████ ████████
@@ -358,8 +414,8 @@ Effects of the Used Color Scheme {#color-scheme-effect}
358
414
██ ███████ ██ ██ ██████ ████████ ████████
359
415
-->
360
416
361
- Forced Color Schemes {#forced}
362
- ====================
417
+ Forced Color Palettes {#forced}
418
+ =====================
363
419
364
420
<dfn export>Forced colors mode</dfn> is an accessibility feature
365
421
intended to increase the readability of text through color contrast.
@@ -498,7 +554,7 @@ Properties Affected by Forced Colors Mode {#forced-colors-properties}
498
554
UAs may further tweak these <a>forced colors mode</a> heuristics
499
555
to provide better user experience.
500
556
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}
502
558
-----------------------------------------------------------------
503
559
504
560
<pre class=propdef>
0 commit comments