CSS defines color values that follow system preferences

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!