skip to content

CSS color-scheme

Elements on a page has a default color defined by the color-scheme value in the User Agent stylesheet.

This is what defines the background-color of body as white, the text-color as black and the varying grey colors of buttons and other interactive elements.

Apple visualizes this very well with their video on "Supporting Dark Mode in Your Web Content":

color-scheme changes the default text and background colors of the page to match the current system appearance, standard form controls, scrollbars and other named system colors also change their look automatically.

Getting started with this is very easy and only requires a few lines of CSS:

:root {
  color-scheme: light;
}

Now, whenever you want to switch the color scheme, you simply update the :root color-scheme to:

:root {
  color-scheme: dark;
}

You can test this directly on this page with the following demo:


(Requires the site to be in lightmode)

color-scheme differs from prefers-color-scheme in one important way, though it's easy to confuse the two. While prefers-color-scheme is all about writing your own styles, color-scheme is all about default appearances. It tells the browser to update the colors in its stylesheet.

For more information on how to implement and use prefers-color-scheme on you websites, see: CSS Darkmode