color-scheme

Syntax

color-scheme: normal | [ light | dark ]+ | only light | only dark

Parameters

Examples

:root {
  color-scheme: light dark;
}

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

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

Browser Support

Tailwind Equivalent

You can achieve similar results in Tailwind CSS using the following utility classes:

Tailwind dark mode is configured via darkMode in tailwind.config.js (class or media strategy)

Related Functions

• light-dark()— The light-dark() function returns one of two colors depending on the element's computed color-scheme (light or dark).
• accent-color— The accent-color property sets the accent color for UI controls like checkboxes, radio buttons, range sliders, and progress bars.
• caret-color— The caret-color property sets the color of the text insertion cursor (caret) in editable elements like inputs and textareas.
• forced-color-adjust— The forced-color-adjust property controls whether an element's colors are adjusted by forced-colors mode (e.g., Windows High Contrast).
• print-color-adjust— The print-color-adjust property controls whether the browser may adjust colors for optimal print output or screen readability.
• text-decoration-color— The text-decoration-color property sets the color of text decorations such as underlines, overlines, and line-throughs.

Frequently Asked Questions