Understanding the color-scheme property

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.


This content originally appeared on Zell Liew and was authored by Zell Liew

(Hey, we're having problems showing images in RSS right now, so if you want a better reading experience, consider viewing this article online [here](https://zellwk.com//blog/understanding-color-scheme. We hope to fix this soon!).

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.


This content originally appeared on Zell Liew and was authored by Zell Liew


Print Share Comment Cite Upload Translate Updates
APA

Zell Liew | Sciencx (2022-08-24T16:00:00+00:00) Understanding the color-scheme property. Retrieved from https://www.scien.cx/2022/08/24/understanding-the-color-scheme-property/

MLA
" » Understanding the color-scheme property." Zell Liew | Sciencx - Wednesday August 24, 2022, https://www.scien.cx/2022/08/24/understanding-the-color-scheme-property/
HARVARD
Zell Liew | Sciencx Wednesday August 24, 2022 » Understanding the color-scheme property., viewed ,<https://www.scien.cx/2022/08/24/understanding-the-color-scheme-property/>
VANCOUVER
Zell Liew | Sciencx - » Understanding the color-scheme property. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/08/24/understanding-the-color-scheme-property/
CHICAGO
" » Understanding the color-scheme property." Zell Liew | Sciencx - Accessed . https://www.scien.cx/2022/08/24/understanding-the-color-scheme-property/
IEEE
" » Understanding the color-scheme property." Zell Liew | Sciencx [Online]. Available: https://www.scien.cx/2022/08/24/understanding-the-color-scheme-property/. [Accessed: ]
rf:citation
» Understanding the color-scheme property | Zell Liew | Sciencx | https://www.scien.cx/2022/08/24/understanding-the-color-scheme-property/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts