TIL there are system colors

Published on 2024-10-04.
Updated on 2025-01-15.

The CSS Color Module Level 4 introduced something called system colors.

There are many colors specified, all worth checking out. Let's focus on Canvas for Background of application content or documents and CanvasText for Text in application content or documents. Worth noting, all those values are color-scheme aware!

Previously acessing root background color was problematic. You could guess it or redefine those values with cost of ignoring agent preferences. In case of text color you could use currentColor as substitute.

My first thought was, Great! I can use them in overlays, dialogs and popovers, but dialogs and popovers are already using these values. As for overlays, most should use HTMLDialogElement anyway. Still, I have a few use cases in mind waiting to be fleshed out, the simplest one is providing background for sticky element.