What is CSS color-scheme property?

In web design, colors significantly shape a website’s perception and influence its visitors’ responses. Color schemes are carefully selected combinations of colors that work together to create a cohesive visual experience, establishing a specific ambiance or style for the website.

CSS has a property called color-scheme that assists developers in managing color sets. In this Answer, we will explain the color-scheme syntax and its use in detail and show an executable example where one can observe its functions at work.

The color-scheme property

The color-scheme property allows web developers to specify the color scheme used by an element and its descendants. It defines which color systems, such as system-defined colors or the user-defined color scheme, should be used to display elements on a webpage. This property is particularly useful for ensuring accessibility and consistency across different platforms and devices.

Syntax

The syntax for the color-scheme property is straightforward:

• normal: This value indicates that the element should use the default color scheme specified by the browser or user settings.

• light: This value indicates that the element should use a light color scheme optimized for bright environments.

• dark: This value indicates that the element should use a dark color scheme optimized for dark environments.

• only light: It specifies that only the light color scheme should be used and prohibits the element’s color scheme from being changed by the user agent.

• light dark: This value indicates that the web page supports light and dark color schemes. It suggests to the browser that it should choose the appropriate color scheme based on the user’s operating system preferences

• inherit: It means the element should inherit the color scheme from its parent.

• initial: It sets the color scheme to its default value.

• revert: It acts like a style eraser, returning to the user’s custom styles or the browser’s defaults.

• revert-layer: It is like a rewind button, taking us back one step within our stylesheet and ignoring the current layer’s styles.

• unset: It sets the color scheme to its inherited value if it exists or else to its initial value.

Here’s a simple example of using color-scheme property with dark value:

Explanation

• Line 2: This sets the entire document’s color scheme to dark mode, optimizing elements for better visibility in darker environments.

Here’s another example that shows how to apply the color-scheme property directly on the HTML element:

Explanation

• Line 2: This sets the entire document’s color scheme to light mode, optimizing elements for better visibility in brighter environments.

• Line 6: This sets the color scheme specifically for <textarea> elements to dark. This means that the background of <textarea> elements will be optimized for dark environments.

Compatibility and browser support

As of the latest update, the color-scheme property is supported in modern web browsers, including Chrome, Firefox, Safari, and Edge. However, it's essential to consider fallback options for browsers that do not support this property to ensure a consistent user experience.

Conclusion

The color-scheme property in CSS offers a versatile way to define the color scheme of web elements, catering to different user preferences and environmental conditions. By leveraging this property, web developers can enhance accessibility and ensure consistency across various platforms and devices. Experiment with different color schemes and adapt them to your design needs to create visually appealing and user-friendly web experiences.