fix #291582: themes: add scrollbar shadow to 2026 themes - #307480
fix #291582: themes: add scrollbar shadow to 2026 themes#307480João Pinheiro (joaopmpinheiro) wants to merge 1 commit into
Conversation
|
@microsoft-github-policy-service agree |
There was a problem hiding this comment.
Pull request overview
This PR addresses #291582 by making the scrollbar.shadow color non-transparent in the 2026 light/dark themes so the “top shadow” is visible in overflowing scrollable UI (e.g. chat input). It also introduces a regression test intended to constrain the opacity of that color.
Changes:
- Update
scrollbar.shadowin2026-light.jsonto a more opaque value (from fully transparent). - Update
scrollbar.shadowin2026-dark.jsonto a more opaque value. - Add a node test that asserts the 2026 themes’
scrollbar.shadowalpha stays under0.85.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
src/vs/workbench/contrib/themes/test/node/themeTransparency.test.ts |
Adds a test that extracts scrollbar.shadow alpha from the 2026 theme JSON files and checks it’s below a threshold. |
extensions/theme-defaults/themes/2026-light.json |
Sets scrollbar.shadow to a non-transparent RGBA hex to restore visible top shadow. |
extensions/theme-defaults/themes/2026-dark.json |
Adjusts scrollbar.shadow to a more opaque RGBA hex to improve visibility. |
| test('scrollbar.shadow alpha should be below 0.85', async () => { | ||
| const lightAlpha = await getScrollbarShadowAlpha('2026-light.json'); | ||
| const darkAlpha = await getScrollbarShadowAlpha('2026-dark.json'); | ||
|
|
||
| const threshold = 0.85; // Threshold for transparency value | ||
|
|
||
| if (lightAlpha !== undefined) { | ||
| // Checks Light Theme | ||
| assert.ok(lightAlpha < threshold, `Light theme scrollbar.shadow alpha (${lightAlpha}) should be below ${threshold}`); | ||
| } else { | ||
| assert.fail('Light theme scrollbar.shadow not found'); | ||
| } |
There was a problem hiding this comment.
The new test only asserts alpha < 0.85, which would still pass for a fully transparent value like #00000000 (the original light-theme regression) and therefore doesn’t actually prevent the “no top shadow” issue from coming back. Consider adding a lower-bound assertion (e.g. alpha > 0 or a small minimum) in addition to the upper threshold so the test enforces visibility as well as avoiding over-opaqueness.
Updates the scrollbar.shadow color in both 2026-dark.json and 2026-light.json with more opaque hex values that match the existing color palette of each theme while ensuring visibility. Includes a test to ensure scrollbar.shadow alpha in 2026 themes is below a threshold of 0.85.
908e018 to
613ea40
Compare
|
Lee Murray (@mrleemurray) Would you mind taking a look at my PR, I'm more than willing to change anything that might be required! |
Lee Murray (mrleemurray)
left a comment
Lee Murray (mrleemurray)
left a comment
There was a problem hiding this comment.
This looks good - Martin Aeschlimann (@aeschli) can you also review when you have a moment?
|
Hey! Just checking in on this PR, are there any more changes needed in order for this to be merged? |
|
João Pinheiro (@joaopmpinheiro) Apologies for the delay, could you please resolve the conflicts? |
Fixes #291582
Description of proposed changes:
Updates the
scrollbar.shadowcolor in both2026-dark.jsonand2026-light.jsonwith more opaque hex values that match the existing color palette of each theme while ensuring proper visibility.Includes an automated test to ensure the
scrollbar.shadowalpha in the 2026 themes remains below a threshold of0.85.Screenshots:
How to test: