CSS Academy · Lesson

color-scheme Property

Use the color-scheme property to inform the browser which themes an element supports.

color-scheme Property is a free CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is color-scheme?

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.

color-scheme Values

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

Browser UI Elements

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 on html Element

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

html {
  color-scheme: light dark; /* supports both, follows OS preference */
}

Meta Tag Equivalent

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

<meta name="color-scheme" content="light dark">

Dark Mode Without Custom Colors

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

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
    background: #111;
    color: #eee;
  }
}

Combining with prefers-color-scheme

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

:root { color-scheme: light; --bg: white; --text: #111; }

@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --bg: #111; --text: #eee; }
}

Scoped color-scheme

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

.light-widget {
  color-scheme: light;
  /* This element's form controls render in light mode */
  background: white;
  color: #111;
}

Forced Colors / Windows High Contrast

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

@media (forced-colors: active) {
  .card {
    border: 2px solid ButtonText;
  }
}

system-color Keywords

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

@media (forced-colors: active) {
  button {
    background: ButtonFace;
    color: ButtonText;
    border-color: ButtonBorder;
  }
}

Quick Check

What CSS behavior does setting color-scheme: dark on the html element enable?

Recap

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.

Frequently asked questions

Is the “color-scheme Property” lesson free?

Yes — the full text of “color-scheme Property” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “color-scheme Property”?

Use the color-scheme property to inform the browser which themes an element supports. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “color-scheme Property” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy