[css-color-adjust-1] Root viewport non-overlay scrollbars should follow the user's preferred color scheme by default

[yshalivskyy]

Root viewport non-overlay scrollbars don't follow the user's preferred color scheme set using OS or browser appearance setting when the CSS color-scheme property for a given container or color-scheme meta tag is unspecified or set to normal (default). Many web pages don't specify the support for light/dark color schemes using CSS color-scheme property or color-scheme meta tag. In such a case, the used color scheme is light for scrollbars and other interactive UI elements despite the user preference set on the browser/OS level. The behavior creates a confusing experience for users who have selected dark mode as a preferred color scheme and expect interactive UI elements like scrollbars to follow their choice.

The experience is particularly drastic for root non-overlay scrollbars, which always stay on the side of the page and are treated by users as a part of the browser UI. Example user feedback for Edge and Chrome.

I propose adjusting the calculation of the used color scheme for the root non-overlay scrollbar to follow the user's preferred color scheme by default if a page author doesn't override user's preference by root CSS color-scheme property or meta tag. Effectively, nothing will change if the user's preferred color scheme is light. However, if the user's preferred color scheme is dark, the root scrollbar will follow the user's preference. Other scrollbars and elements will follow the existing logic for used color scheme calculation.

[lilles]

If the viewport scrollbar is considered part of the UI, why should the color-scheme from CSS affect the viewport scrollbar at all?

Wouldn't a color-scheme:dark making the viewport scrollbar dark, when the preferred color-scheme is light, be equally unexpected?

[yshalivskyy]

It's a good question! I think page authors could leverage the control over page elements inside the viewport, including root scrollbars. Suppose the authors explicitly specified that the light scheme is unsupported (via color scheme or meta tag). In that case, in my opinion, the UA should honor the decision unless the forced colors mode overrides the setting for accessibility purposes.

I don't think we should treat the root viewport scrollbar entirely as a part of the browser UI. However, changing the default behavior when page authors don't specify their preference might benefit many users across the web and improve their experience.

[lilles]

Can this be summarized as?:

If the both of these hold, the user agent should use the user's preferred color-scheme to render the viewport scrollbars:

• The value of "page’s supported color schemes" is 'normal'
• The computed value of color-scheme for the root element is 'normal'

[yshalivskyy]

This is the perfect summary!

[willfs84]

I think relevant? https://bugzilla.mozilla.org/show_bug.cgi?id=1859940

Even though Firefox handles scrollbar theming differently to Chromium (Firefox makes the scrollbars dark far more frequently than Chromium), there's still a case where, on some websites in dark mode, when the user pinch-zooms in, the scrollbars that appear are light. Examples are https://mod.reddit.com/mail/all and https://outlook.live.com/mail/0/ when set to dark mode