I think we will design more visually comfortable and seamless websites and webapps for people once we have access to their preferred system color theme, and once we have access to certain system colors affected by those preferences.
When I sit down at my computer in a comfortably-lit environment, I prefer the less glaring appearance of a dark color scheme. Other times I want a dark palette just because it’s more relaxing to me, and it helps me focus. Alternatively, when I feel a need to energize myself, I prefer light tones. Or maybe I’m just outside and need more contrast. For these varied reasons, I’ve appreciated browser extensions like Stylus and Dark Mode, and I’m especially excited for “Dark Modes” in Android, Linux, Windows, and now MacOS. I love having this kind of control
As a web citizen and developer, I will thrive with these same choices on the web. I think this is why content-focused sites like Reddit and Twitter already offer Night Modes. I want this, and I want to offer this to my users.
I’m reminded of how @media (min-width) turned layout into an enhancement at a time when most sites and site prototyping apps insisted upon a fixed width. Responsive layouts were a paradigm shift. Forcing responsive layouts upon brands and at scale seemed impractical if not impossible, but here we are — we learned, and now we thrive. I foresee the same excitement, resistance, and potential now for color-responsive websites and webapps.
I propose we access to the user’s system color theme with a media query:
/* define colors when the system color theme is light (a light background with dark text) */
@media (color-theme: light) {
html { background: #fff; color: #000 }
a { color: #0000d6 }
}
/* define colors when the system color theme is dark (a dark background with light text) */
@media (color-theme: dark) {
html { background: #000; color: #fff }
a { color: #00c0ff }
}
Now, alongside a color-theme media query, I propose we expose certain system colors as new color keywords or as env() values. This would be immediately useful for coloring simple websites and form controls to match the system appearance, similar to what we get with the system-ui font.
:root {
background-color: system-background-color;
color: system-text-color;
font-family: system-ui;
}
a {
color: system-link-color;
}
Adding these features to CSS will require changes to CSS Media Queries and CSS Color. Would anyone help me?
I’ve made a pull request to change CSS Media Queries here: https://github.com/w3c/csswg-drafts/pull/2742 *
And here is the issue I filed for this with the CSSWG: https://github.com/w3c/csswg-drafts/issues/2735
Finally, let me emphasize that my color preference is unique from my lighting conditions or accessibility enhancements. While my color theme may be influenced by lighting conditions and accessibility needs, my preference wouldn’t necessarily be overruled by them.
The choice of whether to enable a light or dark appearance is an aesthetic one for most users, and might not relate to ambient lighting conditions. — AppKit: Supporting Dark Mode In Your Interface
So, would you help me write up these features? Do you have any objections or concerns?
