-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: White scrollbar with dark themes #15594
Comments
Thanks for reporting this, I think it's definitely worth exploring. My concerns and questions include:
Curious if you have any thoughts on these - if not, I'd love to hear other thoughts or opinions from more people in the community. This partially relates to carbon-design-system/gatsby-theme-carbon#1399 |
A "workaround" here would be to apply this yourself to the |
While I do not currently have answers for all these questions, I can answer some:
To my best knowledge, I am afraid we cannot. However, I encourage the community to confirm this.
Yes, we would have to override the
I believe it should be built into themes.
Waiting for the scrollbar-color is one solution. There also is webkit-scrollbar, which is already supported in Chrome and Safari, where the problem occurs. However, it is non-standard feature and we should not rely on it.
So far, I have only checked the ChakraUI, and it sets the color-scheme on root HTML element when setting the Theme. Example: |
Package
@carbon/react
Browser
Chrome, Safari
Package version
1.48.1
React version
18.2.0
Description
The scrollbar is not colored according to the dark themes (g90, g100).
A workaround is to manually set the
color-scheme
CSS property.The issue does not occur on Firefox.
Reproduction/example
https://stackblitz.com/edit/github-syzh29?file=src%2FApp.jsx
Steps to reproduce
Suggested Severity
Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.
Application/PAL
No response
Code of Conduct
The text was updated successfully, but these errors were encountered: