angular
bug(Angular Material): Scrollbars are light in dark themes
Is this a regression?
- [ ] Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
Scrollbars are always light in Chromium browsers.
This can be easily fixed by adding CSS color-scheme: dark; to the body.
However, I believe that this should be part of the theme. Hence the bug.
Firefox handles scroll bars a bit differently so it is not relevant for Firefox, at least not for the scrollbars.
Reproduction
Steps to reproduce:
- Import an angular material dark theme like purple-green.css in your styles.
- Open the website in Chrome.
- See the dark website with light scroll bars.
Or simply go to https://material.angular.io/ in Chrome and switch to a dark theme.
Expected Behavior
Scrollbars are light in light theme and dark in dark theme.
Actual Behavior
Scrollbars are always light in Chromium Browsers.
Environment
Tested on
- Angular: 14.2.5
- CDK/Material: 14.2.5
- Browser(s): Google Chrome 107.0.5304.107
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10
Have you tried setting the CSS property color-scheme: dark; on the root <html> tag? When I do this, scrollbars render with a more appropriate colour in Safari and Chrome. Chrome seems better at updating the scrollbars that are currently visible. Whereas in Safari, sometimes you have to perform some action that causes the scrollbar to be recreated.
