UI: Set color scheme to sync scrollbar color with user-selected theme

[elisezhg]

What I did

Use the color-scheme property so that the scrollbar color adjusts according to the user's selected theme (light or dark).
This property has been added to the layout component and the tooltip wrapper (as the tooltip is appended to the body using React portals).

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. Set the dark mode in your operating system
2. Run a sandbox for template, e.g. yarn task --task sandbox --start-from auto --template react-vite/default-ts
3. Open Storybook in your browser
4. Access any story
5. Reduce the size of the addons panel to make the scrollbar appear
6. Notice the scrollbar color
   Before:
   
   After:
   

Note that light mode is not impacted:

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	76.5 MB	76.5 MB	0 B	-1.72	0%
initSize	198 MB	198 MB	79 B	-1.51	0%
diffSize	121 MB	121 MB	79 B	0.91	0%
buildSize	7.6 MB	7.6 MB	89 B	0.81	0%
buildSbAddonsSize	1.63 MB	1.63 MB	0 B	0.64	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	2.3 MB	2.3 MB	64 B	0.79	0%
buildSbPreviewSize	349 kB	349 kB	0 B	0.58	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.47 MB	4.47 MB	64 B	0.79	0%
buildPreviewSize	3.12 MB	3.12 MB	25 B	1.8	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	24.5s	23.6s	-944ms	1.21	-4%
generateTime	19.3s	21s	1.6s	-0.87	7.8%
initTime	19.6s	20.1s	515ms	-1.72	2.6%
buildTime	13.8s	13.8s	64ms	-0.69	0.5%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	7.3s	8.2s	901ms	-0.61	10.9%
devManagerResponsive	5.1s	5.1s	-39ms	-1.24	-0.8%
devManagerHeaderVisible	728ms	1.1s	385ms	1.01	34.6%
devManagerIndexVisible	733ms	1.1s	404ms	0.97	35.5%
devStoryVisibleUncached	1.3s	1.6s	342ms	1.24	🔺20.6%
devStoryVisible	775ms	1.1s	383ms	0.96	33.1%
devAutodocsVisible	624ms	693ms	69ms	-0.79	10%
devMDXVisible	631ms	796ms	165ms	0.2	20.7%
buildManagerHeaderVisible	751ms	738ms	-13ms	-0.79	-1.8%
buildManagerIndexVisible	759ms	780ms	21ms	-0.55	2.7%
buildStoryVisible	797ms	793ms	-4ms	-0.77	-0.5%
buildAutodocsVisible	621ms	742ms	121ms	-0.39	16.3%
buildMDXVisible	601ms	870ms	269ms	0.99	30.9%

[greptile-apps]

PR Summary

This pull request introduces the color-scheme property to synchronize scrollbar colors with the user-selected theme (light or dark).

• Tooltip.tsx: Added colorScheme to Wrapper styled component to adjust tooltip scrollbar color.
• Layout.tsx: Added colorScheme to LayoutContainer styled component for consistent scrollbar color with the theme.

These changes ensure a cohesive user experience by aligning scrollbar colors with the selected theme. Ensure cross-browser compatibility for the color-scheme property.

_{2 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 1edccd0.

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	1m 14s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-07-01 08:00:26 UTC

[storybook-app-bot]

Package Benchmarks

^{Commit: 1edccd0, ran on 1 July 2025 at 07:46:01 UTC}

The following packages have significant changes to their size or dependencies:

storybook

	Before	After	Difference
Dependency count	51	51	0
Self size	31.73 MB	31.72 MB	🎉 -16 KB 🎉
Dependency size	17.43 MB	17.43 MB	0 B
Bundle Size Analyzer	Link	Link

@storybook/ember

	Before	After	Difference
Dependency count	202	204	🚨 +2 🚨
Self size	28 KB	28 KB	🎉 -2 B 🎉
Dependency size	27.94 MB	28.75 MB	🚨 +810 KB 🚨
Bundle Size Analyzer	Link	Link

sb

	Before	After	Difference
Dependency count	52	52	0
Self size	1 KB	1 KB	0 B
Dependency size	49.16 MB	49.15 MB	🎉 -16 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/cli

	Before	After	Difference
Dependency count	217	217	0
Self size	582 KB	582 KB	0 B
Dependency size	94.77 MB	94.75 MB	🎉 -16 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	186	186	0
Self size	31 KB	31 KB	0 B
Dependency size	78.87 MB	78.85 MB	🎉 -16 KB 🎉
Bundle Size Analyzer	Link	Link