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.
By Jim Nielsen. Originally published 02/06/21.
Liked this?
Consider subscribing to the RSS feed. That way, you’ll get notified whenever I post anything new. If you’re not sure about RSS feeds, I wrote a guide to RSS.
Previous link Man in Black at 50: Johnny Cash’s empathy is needed more than ever
Next link My cross to bear: what it means to support England in these divided times