What is color-scheme in CSS: Definition and Usage

The color-scheme CSS property lets a webpage declare which color themes (like light or dark) it supports. This helps browsers apply correct default colors for built-in UI elements and form controls to match the page's theme.

How It Works

The color-scheme property tells the browser which color themes your webpage is designed to support, such as light or dark. Think of it like telling your room’s lighting system whether you want bright daylight or cozy evening light, so it can adjust the colors of objects accordingly.

When you set color-scheme, the browser automatically changes the colors of built-in elements like scrollbars, form inputs, and buttons to fit the chosen theme. This means these elements look natural and easy to see without extra styling.

For example, if you say your page supports dark mode, the browser will use darker colors for these controls when the user prefers dark mode, making your site feel consistent and polished.

Example

This example shows how to declare support for both light and dark color schemes. The browser will adjust form controls and scrollbars automatically based on the user's system preference.

css

body {
  color-scheme: light dark;
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: white;
  }
}

Output

A webpage with white background and black text in light mode, switching to dark background and white text in dark mode. Form controls and scrollbars also adapt colors automatically.

When to Use

Use color-scheme when your website or app supports multiple color themes, especially light and dark modes. It helps browsers style built-in UI elements to match your theme without extra CSS.

This is useful for improving accessibility and user experience, as users often prefer dark mode to reduce eye strain or save battery on devices.

For example, if you offer a dark mode toggle, adding color-scheme: dark; ensures form inputs and scrollbars look right in dark mode automatically.

Key Points

• color-scheme declares supported color themes like light or dark.
• Browsers use it to style built-in UI elements automatically.
• Improves consistency and accessibility for theme switching.
• Works best with prefers-color-scheme media query.
• Simple to add and requires no extra styling for form controls.

Key Takeaways

The color-scheme property tells browsers which color themes your site supports.

It helps browsers style form controls and UI elements to match light or dark modes automatically.

Use it when your site supports theme switching to improve user experience and accessibility.

Works best combined with the prefers-color-scheme media query for dynamic theme changes.

Adding color-scheme requires minimal effort but greatly improves visual consistency.