[csswg-drafts] [css-ui] Add a way for authors to indicate that they want dark-mode form controls etc

smfr has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-ui] Add a way for authors to indicate that they want dark-mode form controls etc ==
Proposal
--------

Authors should be able to style their content taking into account the users's preferred system-level color scheme (e.g. for dark mode on macOS Mojave, or Microsoft's [high-contrast mode](https://docs.microsoft.com/en-us/windows/desktop/w8cookbook/high-contrast-mode)). This would allow, for example, a page to express the fact that it has a "dark mode", which would be displayed to users whose system preference is to use a dark-mode interface. Authors would use this new property in conjunction with the [prefers-color-scheme](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme) media query.

Some UAs may also wish to apply automatic presentational transformations to web content (auto-darkening, or conversion into a high-contrast mode). The functionality described below allows a page to opt out of this UA-applied transformation.

Meta tag
---------

We think adding a new meta tag is necessary so that UAs know early in parsing which color scheme is to be used, since this may impact the default appearance of the view containing the web content, and we wish to avoid flashes caused by delayed switches between color schemes.

The meta tag syntax is:

`<meta name="supported-color-schemes" content="[light? || dark? || <ident>?]* || only?">`

"" (empty string) (the default)—the UA may choose to transform the content to match the user's preference.
`light dark`—the UA will choose the light or dark theme to match the user's preference. If the user's preference does not match something in the list, the UA is allowed to apply transformations to the content (e.g. apply high-contrast).
`only`—synonym for `light only`; the UA will only ever render the content in the light color scheme, and never apply transformations[1].
`light dark only`—the UA will choose the first of the listed schemes that it supports taking user preference into account, and never apply transformations[1].
Custom scheme, like `hi-contrast only`—if the UA doesn't support `hi-contrast` it's allowed to fall back to its default rendering `light`, and will never apply transformations.

*Note*: <ident> is present for compatibility; some UAs may support color schemes in addition to light and dark, and the including of unrecognized schemes should not break parsing.
<ident> must not be “only”

*Note*: Maybe the meta tag should be specified outside of CSS.

[1] UAs are allowed to apply minimal transformations, for example making the root background transparent, but not change the overall appearance of the content.

CSS Property
-------------

`supported-color-schemes: [light? || dark? || <ident>?]* || only?`

Inherited: yes
Initial value: light

The CSS property has the same behavior as the meta tag, and allows authors to style sub-sections of content with a different color theme.

How the color scheme affects rendering
----------------------------------------

The UA may take the chosen color scheme into account when rendering the default page background, form controls, the default selection color, and other UA-controlled UI like misspelling underlines.

Interaction with the media query
--------------------------------

The media query always matches the user preference. Authors should avoid styling content for the dark mode if they don't claim to support it in the meta tag.
Issue: Maybe in “non-only” mode the media query should reflect the scheme the UA is converting to?


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3299 using your GitHub account

Received on Wednesday, 7 November 2018 23:04:07 UTC