Published at
Updated at
Reading time
2min
This post is part of my Today I learned series in which I share all my web development learnings.

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.

Demo showing how system CSS colors adjust according to user preferences

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's probably not the time yet...

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!

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 18 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.