Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
[css-ui] Add a way for authors to indicate that they want dark-mode form controls etc #3299
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). 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 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.
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:
"" (empty string) (the default)—the UA may choose to transform the content to match the user's preference.
Note: 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.
Note: Maybe the meta tag should be specified outside of CSS.
 UAs are allowed to apply minimal transformations, for example making the root background transparent, but not change the overall appearance of the content.
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.
Have you considered just re-using the Alternate Style Sheets mechanism from HTML per http://www.idpf.org/epub/altss-tags/#app-night-version-style-set-tags ?
I've thought a little bit about what would be required for a
I'm not sure that just one browser alone could implement a 'dark-mode.css' stylesheet that would be helpful for CSS authors to develop on top of if it wasn't necessarily catching every default style that another browser's user-agent stylesheet was setting.
If anybody is interested in making some kind of
Note that WebKit solves some of the complexity of dark and light mode colors by having special handling of CSS named colors. The named color can resolve to different values, depending on what mode you are in — like