🌐 What Is color-scheme?

The color-scheme property tells the browser which **color themes** (light, dark, or both) your component or site is designed to support. This enables the browser to automatically adjust built-in UI elements such as:

📦 Syntax

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

📌 1. Enable Dark & Light Mode Automatically

:root {
  color-scheme: light dark;
}

Allows browser UI to match the user's system theme automatically.

📌 2. A Component That Supports Only Dark Mode

.dark-widget {
  color-scheme: dark;
}

Browser renders scrollbars, inputs, and form controls using dark styles.

📌 3. Force Light Appearance for a Section

.light-section {
  color-scheme: light;
}

Ensures UI controls use light styling even in dark mode.

📌 4. Combine With prefers-color-scheme

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

@media (prefers-color-scheme: light) {
  body {
    background: #fff;
    color: #222;
  }
}

Let CSS detect the user's system preference and theme the page accordingly.

📌 5. Improve Form Input Styling Automatically

form {
  color-scheme: light dark;
}

Browser-native controls (checkboxes, radios, selects) automatically adapt.

📌 6. Use Inside Shadow DOM Components

:host {
  color-scheme: dark;
}

Ensures web components render UI consistent with their internal theme.

🧪 Real-World Examples

1️⃣ Whole Site Supports Light & Dark Modes

html {
  color-scheme: light dark;
}

2️⃣ Dashboard Widgets With Forced Dark Theme

.widget {
  background: #1e1e1e;
  color: #fafafa;
  color-scheme: dark;
}

3️⃣ Modal or Card That Must Stay Light Even in Dark Mode

.modal {
  background: white;
  color: black;
  color-scheme: light;
}

⚠️ Common Mistakes

🔥 Summary

The color-scheme property helps developers create seamless light/dark mode experiences by letting the browser automatically style built-in UI parts like scrollbars, inputs, and form controls. It improves accessibility, consistency, and user experience.

Learn more →MDN Docs 📘