CSS needs an Accent system color
There's a growing movement among designers and developers to create user-adaptive interfaces. If you haven't heard that term before, it's just a fancy way of saying that the interface is personalized to the user and that it will try to respect the preferences that the user has indicated in their operating system and/or browser.
A small but familiar example of this is using media queries to change the layout based on screen width. A more modern example is using the
prefers-color-scheme query to set light or dark theme.
But those are just bits and pieces. For full-blown user-adaptive design, you can look at Material You.
Most interfaces that I build these days tend to be adaptive (to the best of my ability). Not only does this result in a better experience for the user, but it's also less mental overhead for me. Instead of picking a font, I can just use
system-ui. Instead of finding the perfect button height that works for mobile and desktop, I can just adjust spacing based on the
pointer media query.
But there is something missing.
Every modern interface needs some kind of accent color. Without one, your website would look very dull. Unless that is your brand and you know you can pull it off (looking at you, Heydon 👀).
CSS does have an
accent-color property for changing the color of some native form controls, but you, the designer/developer, are still responsible for picking the actual color (on most platforms anyway). To me, this usually feels like an unnecessary decision that I would rather leave to the user. Many of my UIs fall under affirmative design, and I don't need a strong brand identity. I just want the user to feel at home.
All modern operating systems (except notably iOS) let you pick an accent color, which is then used throughout the OS in different places. macOS even uses it as the default accent-color of native browser controls and text selection. But that only goes so far, as there's no way to use that value to build a custom CSS component.
Which is why we need... 🥁
AccentColor. The name doesn't matter. What's important is that this value is set by the user.
Combined with relative color syntax, this would open up so many possibilities. Imagine extracting a whole palette of colors from the user's preferred hue, and delivering a super polished interface using that.
--accent: Accent; /* <-- I want this */
--accent-1: hsl(from Accent h s 20%);
--accent-2: hsl(from Accent h s 40%);
--accent-3: hsl(from Accent h s 60%);
--accent-4: hsl(from Accent h s 80%);
All that to say, I just want the sites I use to show me a hint of purple 🥺
Update (6/22/2022): Bramus has informed me that
AccentColorText have been added to the spec! This is amazing news 🥳