[Bug]: White scrollbar with dark themes

[IronZDev]

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.

Issue	How it should look like

Reproduction/example

https://stackblitz.com/edit/github-syzh29?file=src%2FApp.jsx

Steps to reproduce

1. Switch to g90/g100 theme.
2. Create any component with a scrollbar.

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

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

Thanks for reporting this, I think it's definitely worth exploring. My concerns and questions include:

• Does defining this property override values we have set (background, borders, etc.) for the components in the g90, g100 themes?
• Is there a way we could scope this setting to just impact the scrollbars?
• Applying this globally seems reasonable, but will it also work with scoped/inline/zoned theming where only a portion of the page is in a different theme?
• Should this be configurable, or built into the themes? e.g. - would we need to document when a user would need to override this setting? (inline/zoned theming, maybe?)
• Would a better approach be to wait for scrollbar-color support so we can explicitly define scrollbar colors to meet 3:1 color ratio for each of our themes?
• How are other design systems approaching this? (spectrum, fluent, chakra, radix, etc)
  • Radix ScrollArea

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

[tay1orjones]

A "workaround" here would be to apply this yourself to the :root with the proper value depending on what theme(s) you're using.

[IronZDev]

While I do not currently have answers for all these questions, I can answer some:

• Is there a way we could scope this setting to just impact the scrollbars?

To my best knowledge, I am afraid we cannot. However, I encourage the community to confirm this.

• Applying this globally seems reasonable, but will it also work with scoped/inline/zoned theming where only a portion of the page is in a different theme?

Yes, we would have to override the color-scheme whenever we change the theme with Theme component or any other technique. Example:
https://stackblitz.com/edit/github-syzh29-q3bcpl?file=src%2FApp.jsx

• Should this be configurable, or built into the themes? e.g. - would we need to document when a user would need to override this setting? (inline/zoned theming, maybe?)

I believe it should be built into themes.

• Would a better approach be to wait for scrollbar-color support so we can explicitly define scrollbar colors to meet 3:1 color ratio for each of our 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.

• How are other design systems approaching this? (spectrum, fluent, chakra, radix, etc)

So far, I have only checked the ChakraUI, and it sets the color-scheme on root HTML element when setting the Theme. Example:
https://codesandbox.io/p/sandbox/exciting-yonath-72znj4