Sticky Scroll Shadow/Border Customization

[demipixel]

Especially in dark mode, it can be easy to miss that there's a shadow there (maybe I'm just blind).

Relavent section:

vscode/src/vs/editor/contrib/stickyScroll/browser/stickyScroll.ts

Line 343 in f1458c0

this.rootDomNode.style.boxShadow = `var(--vscode-scrollbar-shadow) 0 6px 6px -6px`; // '0px 0px 8px 2px #000000';

Would love if the box shadow and/or bottom-border was customizable in the theme.

[demipixel]

I recently learned of editorStickyScroll.background which you can put in your theme, and I think it helps a lot, but I'll leave this ticket open since it would be a nice QoL and doesn't seem like it would be super difficult.

[Staindk]

For what it's worth I can see the shadow quite clearly (even in your screenshot).

You probably aren't blind 😅 - rather I think your monitor's gamma may be set a bit dark (or your monitor is bad at colour reproduction, or you work in weird lighting conditions, or or or).

If you're on windows you could run "Calibrate display color" and see if that helps. Even if it's just to test out my theory (mess around with the gamma slider to check things out, and then hit cancel). You may also be able to set gamma in your monitor's OSD.

I still think this is a worthwhile request though!

[jjspace]

You can already modify that theme value in your settings. It's using the scrollbar.shadow which also applies to the breadcrumbs, the explorer, and likely other locations the app. Might not be worth adding a specific shadow property for this feature and stick to relying on the same scroll shadow that's used everywhere depending on the demand?

{
  "workbench.colorCustomizations": {
    "scrollbar.shadow": "#ff0000"
  }
}

[vscodenpa]

This feature request is now a candidate for our backlog. The community has 60 days to upvote the issue. If it receives 20 upvotes we will move it to our backlog. If not, we will close it. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

[The-Compiler]

With Gruvbox Theme - Visual Studio Marketplace, I can't make out a shadow at all, on two different screens:

It looks like that theme defines a scrollbar.shadow which is the same color as editorWidget.background. I quite like the simplicity of it, but here it is confusing... Not sure if that could be considered a bug in the theme though.

I ended up configuring editorStickyScroll.background instead, which I prefer:

[trusktr]

My theme didn't have any shadow either. Good to know about the background option.

[dashed]

For anyone else just as confused as I am on how to personalize this, you can edit settings.json with the following:

{
  // ...
  "editor.experimental.stickyScroll.enabled": true,
  "workbench.colorCustomizations": {
    "editorStickyScroll.background": "#181a1f",
    "editorStickyScrollHover.background": "#272930"
  }
}

[jibbers42]

Customizing the background color as described does make this feature more usable under my color theme, but I'd still appreciate the ability to make a harder border than I currently have.

[vilicvane]

I would prefer showing ... lines per level. I think that would be much more intuitive comparing to current shadow style, even if it takes larger spaces.

class Foo
    [...]
    hello
        world
        [...]
_________________________
        some other code

[aguscha333]

I am using the high contrast dark mode that comes with VSCode, one would expect that one to have a visible difference between the sticky scroll and the rest of the code. I fixed it in my editor with editorStickyScroll.background as many mentioned. It would be great if it was fixed for everyone since it is a theme that comes with the editor

[vscodenpa]

This feature request has not yet received the 20 community upvotes it takes to make to our backlog. 10 days to go. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

[crystalfp]

Thanks for sharing the trick! At the end the best result is by changing the background.

 "workbench.colorCustomizations": {
    "editorStickyScroll.background": "#000000",
    "editorStickyScrollHover.background": "#272930"
  }

Thanks again!
mario