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

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

/* 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
81	81	96	68	13

Tablets / Mobile
81	96	58	13	13	81

Last updated by CSSPortal on: 1st January 2024