Color Scheme

ELI5 — The Vibe Check

CSS color-scheme tells the browser whether your page supports light mode, dark mode, or both. When set, browser-provided UI elements (scrollbars, form controls, text selection) automatically adapt to the user's preference. It's dark mode for the bits you don't style yourself.

Real Talk

The CSS color-scheme property and corresponding meta tag indicate which color schemes a page supports. Setting color-scheme: light dark allows the browser to adapt default UA styles (form controls, scrollbars, canvas background) to the user's preferred color scheme without custom CSS.

Show Me The Code

/* Let the browser adapt to light or dark */
:root {
  color-scheme: light dark;
}

/* Or in HTML */
<meta name="color-scheme" content="light dark">

When You'll Hear This

"Add color-scheme: light dark and your scrollbars automatically match dark mode" / "Without color-scheme, form inputs stay white even when the rest of the page is dark"