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-schemechanges 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:
Now, whenever you want to switch the color scheme, you simply update the
:root color-scheme to:
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