CSS color-scheme Property

Description

The color-scheme CSS property is used to define the preferred color scheme for a web page, allowing developers to specify whether a webpage should adhere to the user's system-wide color preferences, such as dark mode or light mode. By setting this property to values like "light," "dark," or "no-preference," web designers can ensure a consistent and visually pleasing experience for users, regardless of their device or operating system settings. This property plays a crucial role in enhancing accessibility and user experience by accommodating varying user preferences for color schemes.

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

Interactive Demo

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

/* Light mode */
body {
  color-scheme: light;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    color-scheme: dark;
  }
}

Browser Support

The following table will show you the current browser support for the CSS color-scheme property.

Desktop
Edge Chrome Firefox Opera Safari
8181966813
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
819658131381

Last updated by CSSPortal on: 1st January 2024