CSS color-scheme Property

Description

The color-scheme property tells the user agent which system color themes an element (and its subtree) supports so the UA can choose appropriate default styling for built-in controls, scrollbars, form controls, dialog frames and other user-interface elements it provides. It does not itself assign foreground or background colors to authored content; instead it informs the browser whether it may use its light/dark (or other) system palettes when drawing UA-provided pieces and when resolving system color keywords. Because it is designed to communicate intent rather than to author explicit colors, it helps the UA produce a consistent appearance between native widgets and the page’s custom styling.

When authors provide their own colors, those authored values take precedence for the authored elements, but the presence of an explicit background-color or color can change how the UA interprets which scheme is appropriate for contrast calculations and for deciding whether to apply UA theme-aware rendering. The property is inherited, so setting it on a root element usually signals the preferred schemes for the whole document while allowing nested elements to declare different supported schemes for isolated subtrees. Because it affects UA-supplied elements and system color resolution rather than directly overriding author rules, it’s especially useful when you want native-looking controls and system UI to match an authored theme without having to restyle all system widgets yourself.

forced-color-adjust is often discussed alongside color-scheme because both influence how a page behaves under operating-system enforced color modes (for example accessibility high-contrast settings). Where color-scheme advertises which system palettes the page is compatible with, forced-color-adjust controls whether the UA’s forced-color adjustments are applied to authored content. In practice, using them together allows authors to opt a subtree into system palette behavior while preventing unwanted forced recoloring of custom UI when that would break contrast or layout.

In practical use, authors typically declare the property early (for example on the root element) so the UA can initialize widget styling consistently, and then rely on explicit authored colors where precise control is required. It’s a helpful tool for achieving a cohesive look between native UI components and page content while respecting user and OS preferences; but because it influences UA defaults rather than overriding authored styles, authors should test combinations of declared colors and supported schemes to ensure contrast and accessibility across the environments they care about.

Definition

Initial value: normal
Applies to: all elements and text
Inherited: no
Computed value: as specified
Animatable: yes
JavaScript syntax: object.style.colorScheme

Interactive Demo

color-scheme: normal;

color-scheme: dark;

color-scheme: light;

Syntax

color-scheme: normal | light | dark | only light | only dark

Values

normalThe element can be rendered using the browser's default color scheme.
lightThe element can be rendered using the operating system light color scheme.
darkThe element can be rendered using the operating system dark color scheme.
only lightThe element must be rendered using the operating system light color scheme.
only darkThe element must be rendered using the operating system dark color scheme.

Example

HTML

<body>

  <main class="wrap">

    <h1>CSS color-scheme demo</h1>



    <div class="panels">

      <section class="panel light">

        <h2>Light theme (color-scheme: light)</h2>

        <form>

          <label>

            Text

            <input type="text" placeholder="Type here">

          </label>



          <label>

            Choose

            <select>

              <option>Option 1</option>

              <option>Option 2</option>

            </select>

          </label>



          <label class="checkbox">

            <input type="checkbox">

            Checkbox

          </label>



          <div class="actions">

            <button type="button">Primary</button>

            <button type="button" class="secondary">Secondary</button>

          </div>

        </form>

      </section>



      <section class="panel dark">

        <h2>Dark theme (color-scheme: dark)</h2>

        <form>

          <label>

            Text

            <input type="text" placeholder="Type here">

          </label>



          <label>

            Choose

            <select>

              <option>Option 1</option>

              <option>Option 2</option>

            </select>

          </label>



          <label class="checkbox">

            <input type="checkbox" checked>

            Checkbox

          </label>



          <div class="actions">

            <button type="button">Primary</button>

            <button type="button" class="secondary">Secondary</button>

          </div>

        </form>

      </section>

    </div>



    <p class="note">Built-in form controls and some UI elements follow the element's color-scheme.</p>

  </main>

</body>

CSS

:root {
  --page-bg: #eef3fb;
  --max-width: 980px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: light; /* default page scheme */
}

body {
  margin: 24px;
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
}

h1 {
  margin: 0 0 18px 0;
  font-size: 20px;
  font-weight: 600;
}

.panels {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.panel {
  flex: 1 1 0;
  padding: 18px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
  transition: background-color 180ms ease, color 180ms ease;
  min-width: 300px;
}

/* Light panel: tell the UA this element uses the light color scheme */
.panel.light {
  color-scheme: light;
  --bg: #ffffff;
  --fg: #0f172a;
  background: var(--bg);
  color: var(--fg);
}

/* Dark panel: tell the UA this element uses the dark color scheme */
.panel.dark {
  color-scheme: dark;
  --bg: #0b1220;
  --fg: #e6eef8;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  background-color: var(--bg);
  color: var(--fg);
}

.panel h2 {
  margin-top: 0;
  font-size: 16px;
}

form {
  margin-top: 12px;
}

label {
  display: block;
  font-size: 14px;
  margin-bottom: 12px;
}

input[type="text"],
select {
  display: block;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: transparent;
  color: inherit;
  width: 100%;
  box-sizing: border-box;
}

/* Lightweight styling for buttons; avoid overriding UA entirely so you can still see color-scheme differences */
.actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

button {
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  background: rgba(2, 132, 199, 0.12);
  color: #0369a1;
}

button.secondary {
  background: transparent;
  border: 1px solid rgba(15, 23, 42, 0.08);
  color: inherit;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Use accent-color to hint preferred accent on controls without overriding color-scheme behavior */
.panel.light,
.panel.dark {
  accent-color: #0563d6;
}

.note {
  margin-top: 14px;
  font-size: 13px;
  color: #475569;
}

/* Ensure form controls retain legible borders on dark backgrounds */
.panel.dark input[type="text"],
.panel.dark select {
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Small responsive tweak */
@media (max-width: 720px) {
  .panels {
    flex-direction: column;
  }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS color-scheme property. Hover over a browser icon to see the version that first introduced support for this CSS property.