CSS System Colors

I’m really enjoying Jim Neilsen’s blog at the moment, where he’s exploring what HTML is for, and what it can do. It’s quite inspiring, and has got me reaching for a “purer” approach that focuses on accessibility and interoperability rather than decoration (not that I’ve ever gone in for decoration, of course).

I’d not heard of CSS system colors and I’ve been looking at implementing them on my site this afternoon. Alas, there are a few problems which I haven’t been able to fathom. This is a shame as it would leave light and dark mode settings to the browser, which in turn would mimic the OS’s colour choices. Apart from being very cool, it’d save a fair few prefers-color-scheme declarations in my stylesheet.

Firstly, I couldn’t actually get color-scheme: light dark; to work in Firefox 89.0, but it was fine in Safari 14.1.1. Secondly, Safari only seems to have a single set of link colours, so if you’re in dark mode you’ll struggle to see links as they’ll render in the default blue you see on white backgrounds. The spec says:

To maintain legibility, the keywords also respond to light mode or dark mode changes... the browser should ensure that matching foreground/background pairs have a minimum of WCAG AA contrast.

So I guess it’s just not been fully implemented yet.