Many web pages don't specify the support for light/dark color schemes using CSS "color-scheme" property or meta tags. 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. Although the behavior is expected for elements which are part of the web content, viewport non-overlay scrollbars always stay on the side of the page and are treated by users as a part of the browser UI. The current behavior confuses users who have selected dark mode and expect viewport scrollbars to follow their choice.
Proposed solution
The proposed solution is to make the browser use the user's preferred color scheme to render the viewport scrollbars if the value of "page’s supported color schemes" is 'normal' or not specified, and the computed value of the color-scheme for the root element is 'normal'. Viewport scrollbars can be considered to be outside the web content. Therefore, the user agents should honor the user's preferred color scheme when rendering viewport scrollbars if page authors have not explicitly specified support for color schemes.
WebKittens
No response
Title of the spec
CSS Color Adjustment Module Level 1
URL to the spec
https://www.w3.org/TR/css-color-adjust-1/
URL to the spec's repository
No response
Issue Tracker URL
No response
Explainer URL
No response
TAG Design Review URL
No response
Mozilla standards-positions issue URL
https://github.com/mozilla/standards-positions/issues/995
WebKit Bugzilla URL
No response
Radar URL
No response
Description
Problem statement
Many web pages don't specify the support for light/dark color schemes using CSS "color-scheme" property or meta tags. 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. Although the behavior is expected for elements which are part of the web content, viewport non-overlay scrollbars always stay on the side of the page and are treated by users as a part of the browser UI. The current behavior confuses users who have selected dark mode and expect viewport scrollbars to follow their choice.
Proposed solution
The proposed solution is to make the browser use the user's preferred color scheme to render the viewport scrollbars if the value of "page’s supported color schemes" is 'normal' or not specified, and the computed value of the color-scheme for the root element is 'normal'. Viewport scrollbars can be considered to be outside the web content. Therefore, the user agents should honor the user's preferred color scheme when rendering viewport scrollbars if page authors have not explicitly specified support for color schemes.
Bugs tracking this feature
Chromestatus: Used color scheme root scrollbars - Chrome Platform Status (chromestatus.com) Chromium: Make root viewport non-overlay scrollbars follow the user's preferred color scheme by default [40259909] - Chromium CSSWG issue: [css-color-adjust-1] Root viewport non-overlay scrollbars should follow the user's preferred color scheme by default · Issue #8603 · w3c/csswg-drafts (github.com)