UI: Fix scrollbar color to be visible in dark theme

[MichaelArestad]

@yannbf pointed out to me the scrollbar handles are nearly invisible when using the dark theme. Let's fix that!

What I did

I modified the color to work well in both dark and light themes. I looked at the MacOS scrollbars in both MacOS dark/light modes to roughly match the contrast in both modes. It is also trivial to make each mode have a different color (that's what I did at first), but I think this works well alongside the MacOS scrollbar handles.

How to test

1. Modify examples/official-storybook/manager.js to enable dark mode.
2. Build and run Storybook.
3. Open the addon panel and dock it to the side. It might help to resize it so it is fairly narrow.
4. Scroll the tabs.

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

Before

After

[nx-cloud]

Nx Cloud Report

CI ran the following commands for commit af9b9ef. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status	Command
	nx run-many --target=prepare --all --parallel --max-parallel=15

---

Sent with 💌 from NxCloud.

[domyen]

Nice! I love it 😻

…

On Wed, Oct 13, 2021 at 3:13 PM nx-cloud[bot] ***@***.***> wrote: Nx Cloud Report We didn't find any information for the current pull request with the commit c6c9120 <c6c9120> . You might need to set the 'NX_BRANCH' environment variable in your CI pipeline. Check the Nx Cloud Github Integration documentation <https://nx.app/docs/public-cloud-github-integration> for more information. ------------------------------ Sent with 💌 from NxCloud. <https://nx.app> — You are receiving this because your review was requested. Reply to this email directly, view it on GitHub <#16345 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACAJWL3YXJYYQOMKQITG3DUGYABNANCNFSM5F6HOEXQ> .

[yannbf]

Super awesome seeing your contributions @MichaelArestad! I'm wondering if the color will be set for other scenarios as well like here

[MichaelArestad]

Super awesome seeing your contributions @MichaelArestad! I'm wondering if the color will be set for other scenarios as well like here

You know, I'm not sure what's going on there, @yannbf. I am not entirely clear what Bar is for. From what I saw, I think theme.barBg is used for background colors of toolbars.

[yannbf]

Super awesome seeing your contributions @MichaelArestad! I'm wondering if the color will be set for other scenarios as well like here

You know, I'm not sure what's going on there, @yannbf. I am not entirely clear what Bar is for. From what I saw, I think theme.barBg is used for background colors of toolbars.

I will try this out right now and get back to you!

[yannbf]

Alright I just got confused! LGTM!!

[MichaelArestad]

Thanks, @yannbf !