How can I use the macOS system accent color in CSS?

Question

When using Safari on macOS, form controls like buttons and selects use the system's accent color.

When changing the accent color by going to System Preferences > General then the form elements' color changes accordingly.

How can I use this accent color in my own CSS styles?

A CSS solution is preferred but a JavaScript solution works too if it isn't possible using just CSS.

Answer 1

Your best (only) bet at doing this is using a System Colour -- however, most of these are either deprecated or do not return relevant values.

As an example, lets look at the highlight system colour:

div {
  background-color: highlight;
}

<div>Example</div>

This should be the same as the colour which appears when you select (highlight) text. However, there seems to be inconsistency here. Firefox returns the actual accent colour directly (which is exactly what you want!), and until recently Chrome and Safari returned the text selection colour instead. However, Chrome and Safari now seem to just always return a blue colour, presumably to prevent this from being used as a way to fingerprint users.^{[citation needed]}

So, this is the closest you are going to get to something like this, I reckon. Potentially, you could use the highlight system colour to extrapolate the actual system colour selected, as text highlight colour and accent colour share a 1-1 relationship (note also that dark mode changes these colours, so you would have to account for that). However, I don't think that this would be reliable, and seeing as browsers are removing support for this kind of thing, I find it highly unlikely they will create a new API to replace it.

Of note though is the fact that most users do not change their system colour that much -- in fact, most people set it to their favorite when they first set up their computer, and never change it afterwards. Therefore, it would probably not be a big hassle to just offer users your own set of radio buttons to change a colour. This is also useful, as users may want to override their system preferences for a given site, as with e.g. dark mode.

---

An experiment I recently thought of was to get the computed style for the accent-color CSS property (e.g. create a checkbox and then use window.getComputedStyle(checkbox).accentColor), but sadly this doesn't work, at least on Chrome --- it just returns "auto" rather than the actual computed colour value.

Answer 2

For Safari and WKWebView you might use:

background: -apple-system-control-accent;

See here and here. Although my results always were blue, event though I did set another color.

A new feature is also accent-color: auto;, see here.

Otherwise Highlight color works fine most of the time, but best on Firefox.