Since Apple introduced Dark Mode as a system setting in macOS 10.14 and later in Safari, the topic has dominated discussions. Its potential for innovative design and personalized user experiences is captivating.

This week saw the release of an Editor's Draft and the First Public Working Draft for the Color Adjust Module Level 1 specification. While still a work in progress, its development is fascinating. The specification introduces three new CSS properties, offering greater control over how user agents handle visual rendering based on user preferences.

color-scheme is the core property. It accepts light and dark values, corresponding to Light Mode and Dark Mode system preferences. While other labels might be used (e.g., "Day" and "Night"), the fundamental distinction remains: light versus dark color schemes.

This property has significant implications. It allows style adjustments based on user system preferences, enabling fine-tuned user experiences. Furthermore, declaring this property signals to the user agent that an element is "color-scheme aware," prompting styling adjustments according to the user's preference. Conversely, the auto value grants the browser complete control, allowing it to determine the color scheme based on system preferences and default styling.

It's important to note the prefers-color-scheme media feature (currently in the Editor's Draft for Media Queries Level 5), which aids in detecting user preferences and enhancing user experience control. The Color Adjust Module Level 1 Working Draft also suggests using a color-scheme value within a <meta> element to indicate color scheme support.

The color-scheme property includes additional features: the only keyword, value chaining for preference ordering, and a custom ident keyword. A thorough review is recommended due to its complexity.

The potential of this draft to revolutionize design and decision-making is exciting. And this is just the beginning; two more properties are included:

• forced-color-adjust: This allows color scheme support while overriding default user agent stylesheets with custom CSS. There's a note about potential merging with color-adjust.
• color-adjust: Instead of forcing CSS overrides, this property provides a hint to browsers, enabling color value adjustments based on user preferences and other factors like screen quality or bandwidth. Eric Bailey's work explores potential use cases, accessibility enhancements, and general implementations.

The current draft is expected to expand. This provides an opportunity to acknowledge the W3C's remarkable work, understand the challenges involved, and even contribute to the process. (See Rachel Andrew's advice on contributing.)

The above is the detailed content of A Quick Look at the First Public Working Draft for Color Adjust Module 1. For more information, please follow other related articles on the PHP Chinese website!