System color keywords

CSS has system color keywords that reflect the colors used by the browser. The somewhat ugly default blue color of links, for example, is available as a keyword to use anywhere in your CSS. That’s not something I’ve ever reached for. One of the newer additions, however, is more useful: AccentColor.

Respecting user preferences

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.

— CSS needs an Accent system color

Dark mode is the most prominent example of changing UI depending on user preferences. prefers-reduced-motion is another. With the new CSS keyword value AccentColor, we can also tie form-styling to user choices.

AccentColor

The color of most HTML form elements reflects the accent color used by the operating system. On most operating systems users can change this value in their settings.

The rise in popularity of component libraries like shadcn is driven by the fact that native HTML form controls, depending on the browser and operating system, often look rather ugly. You can apply CSS to HTML inputs but there’s a huge limit on what you can style. It’s therefore common to use appearance: none to visually hide the element and to then visually rebuild it out of divs to gain full control over styling. Unlike the native HTML form controls, components you’ve handcrafted (or imported from a component library) had no way to reflect the system accent color chosen by the user. AccentColor brings that ability to CSS.

label:has(input:checked) .checkbox {
  background-color: AccentColor;
}

Below is an example of a custom radio and checkbox using AccentColor:

Browser support

AccentColor has been supported in Firefox since version 103. It is supported in Chrome 115 behind a flag.