Intent to Experiment: Auto Dark Mode & the CSS color-scheme “only” keyword

[Peter Beverloo]

Contact emails
fut...@chromium.org, p...@chromium.org, pe...@chromium.org

Spec
https://drafts.csswg.org/css-color-adjust/#color-scheme-prop

Summary
This Origin Trial covers two pieces of related functionality:

First, websites that decide to participate in this trial will have their appearance algorithmically adjusted to be darkened, and thus appropriate for display whilst a device is in Dark Mode. Rendered colors will have their lightness adjusted to appear dark, and images will be classified, where images will be classified first based on their size and properties, then by a machine learning model to help distinguish iconography from photos and other images.

Second, support for the CSS color-scheme “only” keyword, which forbids the user agent from overriding the color scheme for an element. This enables participating websites to manually touch-up certain elements when the algorithm gets it wrong, which will happen.

Goals for experimentation
Modern operating systems, particularly mobile ones, feature extensive, platform-wide Dark Mode implementations. Dark Mode is the default, out-of-the-box experience on some Android devices, and automatically enabled during nighttime on many more.

Early data is suggesting that dark themes use 10% less battery than light themes at 75% brightness, and suggest significant differences in user behaviour on websites that don’t provide a dark mode whilst the user’s device is in dark mode.

However, we heard feedback from developers that one of the reasons why dark themes haven’t been more widely adopted on the web is the cost of creating and maintaining a second theme for web applications.

With this Origin Trial for Auto Dark Mode, we’d like to experiment with both partners and developers to understand the impact of Dark Mode on their websites, and to understand the quality of our algorithms outside of our own testing environment.

Experimental timeline
The experiment will start in M96, and will last until (& including M99). Auto Dark Mode is already programmatically detectable by developers to inspect the computed styles, but we might want to iterate during the Origin Trial with an addition if the CSS working group agrees on one:

https://github.com/w3c/csswg-drafts/issues/6664

Any risks when the experiment finishes?
No, websites will revert back to their original appearance.

Ongoing technical constraints
Auto Dark Mode in particular is a fairly intrusive feature, but builds upon the force dark mode feature already launched for Android WebView.

Debuggability
Developers already have the ability to test this functionality on their pages by opening DevTools, selecting the Rendering option in "More tools", and then emulating Auto Dark Mode.

Users and developers alike have the ability to enable this functionality for all websites through a flag which can be found on chrome://flags/#enable-force-dark.

Will this feature be supported on all five Blink platforms supported by Origin Trials (Windows, Mac, Linux, Chrome OS, and Android)?
The Origin Trial will be available for Android only.

There are no strict technical reasons for this, but given that the functionality is most appropriate for mobile devices, there might be different considerations between mobile and desktop, and that the team is currently focused on improving the Android experience, we’d like to begin there.

Link to entry on the feature dashboard
https://chromestatus.com/feature/5672533924773888

[Yoav Weiss]

This seems extremely useful!

What are the timelines for experimentation? Do you have partners lined up that are ready to play with this?

Also, the intent seems to be missing many fields (signals from other vendors and developers, TAG review, etc)

Can you complete the missing ones from the Chrome status entry?

On Tue, Oct 5, 2021 at 10:18 PM Peter Beverloo <pe...@chromium.org> wrote:

Contact emails
fut...@chromium.org, p...@chromium.org, pe...@chromium.org

Spec
https://drafts.csswg.org/css-color-adjust/#color-scheme-prop

Summary
This Origin Trial covers two pieces of related functionality:

First, websites that decide to participate in this trial will have their appearance algorithmically adjusted to be darkened, and thus appropriate for display whilst a device is in Dark Mode. Rendered colors will have their lightness adjusted to appear dark, and images will be classified, where images will be classified first based on their size and properties, then by a machine learning model to help distinguish iconography from photos and other images.

Second, support for the CSS color-scheme “only” keyword, which forbids the user agent from overriding the color scheme for an element. This enables participating websites to manually touch-up certain elements when the algorithm gets it wrong, which will happen.

Goals for experimentation
Modern operating systems, particularly mobile ones, feature extensive, platform-wide Dark Mode implementations. Dark Mode is the default, out-of-the-box experience on some Android devices, and automatically enabled during nighttime on many more.

Early data is suggesting that dark themes use 10% less battery than light themes at 75% brightness, and suggest significant differences in user behaviour on websites that don’t provide a dark mode whilst the user’s device is in dark mode.

However, we heard feedback from developers that one of the reasons why dark themes haven’t been more widely adopted on the web is the cost of creating and maintaining a second theme for web applications.

With this Origin Trial for Auto Dark Mode, we’d like to experiment with both partners and developers to understand the impact of Dark Mode on their websites, and to understand the quality of our algorithms outside of our own testing environment.

Experimental timeline
The experiment will start in M96, and will last until (& including M99). Auto Dark Mode is already programmatically detectable by developers to inspect the computed styles, but we might want to iterate during the Origin Trial with an addition if the CSS working group agrees on one:

https://github.com/w3c/csswg-drafts/issues/6664

Any risks when the experiment finishes?
No, websites will revert back to their original appearance.

Ongoing technical constraints
Auto Dark Mode in particular is a fairly intrusive feature, but builds upon the force dark mode feature already launched for Android WebView.

Debuggability
Developers already have the ability to test this functionality on their pages by opening DevTools, selecting the Rendering option in "More tools", and then emulating Auto Dark Mode.

Users and developers alike have the ability to enable this functionality for all websites through a flag which can be found on chrome://flags/#enable-force-dark.

Neat!

 

Will this feature be supported on all five Blink platforms supported by Origin Trials (Windows, Mac, Linux, Chrome OS, and Android)?
The Origin Trial will be available for Android only.

There are no strict technical reasons for this, but given that the functionality is most appropriate for mobile devices, there might be different considerations between mobile and desktop, and that the team is currently focused on improving the Android experience, we’d like to begin there.

Link to entry on the feature dashboard
https://chromestatus.com/feature/5672533924773888

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CALt3x6%3DkTVanrag5ePo39E-FXBzgNChkxqU35CvfQsYZ6AxZeg%40mail.gmail.com.

[Peter Beverloo]

Thanks Yoav!

On Thu, Oct 7, 2021 at 8:15 AM Yoav Weiss <yoav...@chromium.org> wrote:

This seems extremely useful!

What are the timelines for experimentation? Do you have partners lined up that are ready to play with this?

The experiment will start in M96, and will last until (& including M99). We have several partners lined up indeed.

Also, the intent seems to be missing many fields (signals from other vendors and developers, TAG review, etc)

Can you complete the missing ones from the Chrome status entry?

Yikes! Hereby:

Blink component
Blink>DarkMode

TAG review
CSS Color Adjust Level 1 has already seen a TAG review, but (re)inclusion of the "only" keyword was not part of that:

https://github.com/w3ctag/design-reviews/issues/583

We're still pursuing some additions for a more complete developer story (e.g. https://github.com/w3c/csswg-drafts/issues/6664) and will request review after that.

TAG review status
Not applicable

Interoperability and Compatibility

Gecko: No signal

WebKit: No signal, although Web contents in Apple Mail on iOS supports a force dark mode.

Web developers: Mixed: we've received positive feedback regarding the decrease in cost of providing a dark mode with the availability of a per-element opt-out, but have also heard concerns about the quality of the darkening algorithms. This experiment will allow us to gather more data on both.

Is this feature fully tested by web-platform-tests?
Yes, parsing tests are included in //css/css-color-adjust/.

Requires code in //chrome?
No.

Thanks,

Peter

[Yoav Weiss]

LGTM to experiment M96-M99 (inclusive)

On Thu, Oct 7, 2021 at 5:12 PM Peter Beverloo <pe...@chromium.org> wrote:

Thanks Yoav!

On Thu, Oct 7, 2021 at 8:15 AM Yoav Weiss <yoav...@chromium.org> wrote:

This seems extremely useful!

What are the timelines for experimentation? Do you have partners lined up that are ready to play with this?

The experiment will start in M96, and will last until (& including M99). We have several partners lined up indeed.

Also, the intent seems to be missing many fields (signals from other vendors and developers, TAG review, etc)

Can you complete the missing ones from the Chrome status entry?

Yikes! Hereby:

Blink component
Blink>DarkMode

TAG review
CSS Color Adjust Level 1 has already seen a TAG review, but (re)inclusion of the "only" keyword was not part of that:

https://github.com/w3ctag/design-reviews/issues/583

We're still pursuing some additions for a more complete developer story (e.g. https://github.com/w3c/csswg-drafts/issues/6664) and will request review after that.

TAG review status
Not applicable

Interoperability and Compatibility

Gecko: No signal

WebKit: No signal, although Web contents in Apple Mail on iOS supports a force dark mode.

Would be good to get such signals, but that's not blocking: https://bit.ly/blink-signals

 

Web developers: Mixed: we've received positive feedback regarding the decrease in cost of providing a dark mode with the availability of a per-element opt-out, but have also heard concerns about the quality of the darkening algorithms. This experiment will allow us to gather more data on both.

Makes sense.

[Theodore Olsauskas-Warren]

Privacy clarification question, you've mentioned that an ML model will be used to distinguish iconography from photos, I'd like to understand a bit more about that model. Is the model static? Will we be delivering the same model to all users? With what cadence will we be pushing new models?

Thanks,

Theo.

[Theodore Olsauskas-Warren]

Friendly bump on the above, are the details of the proposed ML model available anywhere?

Theo.

[Peter Beverloo]

Hi Theodore - apologies for missing this!

A single model is used for all users, which ships as part of Chromium. The generated implementation is checked into the following directory:

https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/platform/graphics/darkmode/

Thanks,

Peter

[Theodore Olsauskas-Warren]

Ok great, thanks for clarifying Peter. We (S&P OWP reviewers) didn't have any other concerns.

Theo.