CSS defines color values that follow system preferences
- Published at
- Updated at
- Reading time
- 2min
I learned something exciting from Jim Nielsen today. Jim shared that CSS defines system color values that follow the system color preferences (light and dark mode). If you want to learn more about the nitty-gritty details, read his post or have a look at the CSS Color Module Level 4 specification.
This post shares my discoveries after playing around with system color values such as Canvas
and CanvasText
.
You can find all defined system color values in the example below. Change your color preferences and see the colors below adjust!
You can see the colors react to system preferences in Chrome and Safari in the video below, too.
Here are a few things I noticed. ๐
At the time of writing, it appears that only Chromies' and Safari's system color values take the system preferences into consideration. I assume that there's no Firefox support because Firefox doesn't support the color-scheme
CSS property yet. ๐คทโโ๏ธBut I can't be sure about that either because a supported color-scheme
property doesn't mean that all the system colors work correctly. Read on!
Even though the specification defines 15 system colors, not all of them function today. E.g. ButtonBorder
, Mark
and MarkText
don't seem to be implemented in Chromiums or Safari at all.
And lastly, what's interesting is that Chrome and Safari define slightly different colors for some system colors. Chrome defines Canvas
as pure black (#000
) when users prefer dark mode. Safari on the other hand, is going with a dark gray (#1e1e1e
).
:root {
/*
"Canvas" becomes the following ๐
Light system preferences:
- Chrome: #fff
- Safari: #fff
Dark system preferences:
- Chrome: #000
- Safari: #1e1e1e
*/
background-color: Canvas;
/*
"CanvasText" becomes the following ๐
Light system preferences:
- Chrome: #000
- Safari: #000
Dark system preferences:
- Chrome: #fff
- Safari: #fff
*/
color: CanvasText;
}
Jim pointed out that you can use system colors to make websites feel more "native". If you're building a web app that should blend in nicely on iOS, the correct colors are the key and system colors provided by Safari will come in handy!
It feels to me that it's too early to entirely rely on system color CSS values because there's no cross-browser support yet, and except for Canvas
and CanvasText
I don't have a great feeling about the other colors.
Nevertheless, it's a great thing to be aware of these system colors. If/when I tackle dark mode for this site, I'll check if I can use provided system colors!
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 6 days ago.