color-scheme Property

The color-scheme property tells the browser which color schemes an element (or the page) supports. The browser then uses this information to style its own UI elements — scrollbars, form controls, checkboxes, input borders — to match the requested scheme.

Accepted values:

• normal: element uses the document default
• light: element supports light scheme only
• dark: element supports dark scheme only
• light dark: supports both; browser picks based on preference
• dark light: prefers dark; falls back to light

The browser automatically styles these elements according to color-scheme:

• Scrollbars
• Input fields, textareas, select dropdowns
• Checkboxes, radio buttons
• Range sliders
• Date/time pickers

Setting color-scheme on the root element changes the entire page's system UI rendering:

You can also declare color-scheme in HTML as a meta tag for earlier application (before CSS loads):

A minimal dark mode: set color-scheme: dark and let the browser handle form elements and scrollbars automatically:

Use prefers-color-scheme to detect preference and set both your custom tokens AND the color-scheme property together:

Apply color-scheme to specific elements to create isolated light islands in a dark page:

The forced-colors media query detects Windows High Contrast Mode. Use color-scheme and forced-colors together for comprehensive accessibility support.

When forced-colors is active, use CSS system color keywords that map to the user's accessible color palette:

color-scheme instructs the browser how to style its own UI controls for an element or page. Use color-scheme: light dark globally to enable automatic native UI adaptation. Combine with CSS custom properties for a complete dark mode implementation. Use the meta tag for early application before CSS loads.