Dark theme scrollbar styles

[adidahiya]

We've had a few discussions around custom scroll bar styling provided out of the box with Blueprint. I think this is a good idea. A number of our users are running Windows, which can often produce jarring visuals:

Chrome:

IE11:

So apps often end up rolling their own solution to make this situation look less ugly. It would be great if we could standardize a styling solution to address this problem.

Challenges

1. It's hard to write CSS styles to do this across all browsers & OSs. Not all of them support custom styling.
2. Blueprint doesn't do any browser or OS detection. I don't think it should -- applications should be responsible for doing this and telling Blueprint this information, either through a top-level CSS class or a JS API.
3. Custom scrollbars built with JS add a lot of complexity (but there are a lot of libraries out there that try to help with this).

Proposals

from @crazytoucan:

Could a solution look something like a LESS Chrome scrollbars mixin? Then our app could decide whether to body { .pt-chrome-scrollbar-styles(); }, or body.os-windows { .pt-chrome-scrollbar-styles(); }, or choose not to opt-in altogether.

[giladgray]

you know how i feel about custom scrollbars 😒 but i hear the IE argument, and it's true that IE's custom scrollbar support is pretty great.

more likely this is a simple CSS class .pt-custom-scrollbars that changes all nested scroll containers (like .pt-dark affects all nested elements). might make sense to also have .pt-custom-scrollbars-ie-only and -webkit-only to limit the scope of the restyling.

[llorca]

I'd really like to avoid putting this IE-specific mess into core. Can we just provide folks with a snippet that makes IE scrollbars look nice? It's then up to them to integrate it however they see fit in their app

[adidahiya]

It's not IE specific. It affects all Windows users, and a lot of those are on Chrome. My first screenshot was on Chrome

[llorca]

Windows-specific, sorry. My comment still applies

[giladgray]

I don't really see a conflict in providing opt-in CSS classes to enable custom scrollbar styles on IE or WebKit browsers only (the only browsers that support custom scrollbars).

[llorca]

I mean, sure, we could throw it in. In my view, this isn't a strong case to start providing OS/browser-specific things

[shravan2x]

It's been almost a year, is there any progress on this?

[adidahiya]

Not yet. If you are interested in contributing, feel free to write a proposal and send a PR.

[ghost]

Have you guys tried this? https://github.com/KingSora/OverlayScrollbars

[shravan2x]

The scrollbar style from this screenshot on the Palantir Dribbble page is very nice.

[adidahiya]

I think we can make meaningful progress here by using the color-scheme CSS property as suggested in resources like this SO post. I'll add this to v4.0 to be shipped alongside the overall color changes.