Understanding the color-scheme property

You would have heard of the CSS color-scheme property if you are interested in adding a dark theme to your website. Here’s what it looks like:

:root {
  color-scheme: light dark;
}

color-scheme tells the browser to render user-agent stylesheets according to the user’s preferred color scheme (which is set in their operating system).

There are three possible values (and it’s super easy to understand):

• light: Browser will render styles according to the light scheme only
• dark: Browser will render styles according to the dark scheme only
• light dark (or dark light): Browser will render styles according to the scheme the user prefers

This means:

• color-scheme: light will give black text on a white background
• color-scheme: dark will give white text on a black background
• color-scheme: light dark or dark light will give either light or dark depending on the user’s color scheme preference in their operating system.

Is color-scheme necessary?

Most articles would recommend you use color-scheme.

But nope. color-scheme is not necessary.

color-scheme is not necessary because it only changes the colors in the user-agent stylesheet. If you are confident you would override all user-agent stylesheet colors, there’s no need to add this extra line.

In fact, I’d argue it’s safer to omit color-scheme when you’re building Light and Dark themes… but that’s a topic for another day when I consolidate all the information I found about creating Light and Dark themes.

Just my two cents.

Update: Setting color-scheme to would change scrollbar colors. So the property is no longer unnecessary. I’m still hesitant about using it because it may introduce more problems… but I’ll leave that conversation for another day.