Add main scrollbar dark mode support and improve scrollbar styles

[clicktodev]

Introduce support for dark mode in the main scrollbar and enhance scrollbar styles to use native styles as much as possible for better contrast and more predictable scrollbars adhering more to user expectations.

[josevalim]

Thank you @hichemfantar!

@liamcmitchell @DavidOliver @jonatanklosko, can you please let me know if you are happy with this direction?

[clicktodev]

@josevalim no problem! I opened this mainly to fix the main scrollbar not supporting dark mode but also noticed the inconsistent styles of the scrollbars so I decided to rely on native styles as much as possible as from my experience that reduces problems with cross browser support (custom scrollbar styles in safari and firefox are usually inconsistent and flat out broken sometimes).

[DavidOliver]

Thanks, @hichemfantar. I like the way the scrollbars appear in your screenshots.

Testing out in the two browsers I happen to use in the Pantheon desktop environment is giving mixed results.

Vivaldi

main:

better-scrollbars:

Scrollbars for side menu and search results end up with less contrast, but all three page/in-page scrollbars are made consistent.

Firefox

main:

better-scrollbars:

Scrollbars are even thinner than they were.

---

I don't have much experience with customising scrollbars, so I don't have anything much to offer other than the screenshots. It seems to be a messy situation. (Don't you just love web dev? 😉 )

If your new scrollbar styling is more standardised and works well for other browsers, maybe it's the right move anyway. Though the thinning of the scrollbars in Firefox is really unfortunate.

[clicktodev]

t̶h̶e̶ t̶h̶i̶n̶n̶i̶n̶g̶ b̶e̶h̶a̶v̶i̶o̶r̶ i̶s̶ i̶n̶t̶e̶n̶t̶i̶o̶n̶a̶l̶ b̶u̶t̶ I̶ g̶u̶e̶s̶s̶ i̶t̶ c̶a̶n̶ b̶e̶ t̶o̶o̶ t̶h̶i̶n̶ f̶o̶r̶ s̶o̶m̶e̶ p̶e̶o̶p̶l̶e̶. I̶'l̶l̶ r̶e̶v̶e̶r̶t̶ t̶h̶e̶ c̶h̶a̶n̶g̶e̶ a̶n̶d̶ m̶a̶k̶e̶ t̶h̶e̶m̶ n̶o̶r̶m̶a̶l̶ w̶i̶d̶t̶h̶!̶

[clicktodev]

the aggressive firefox thin behavior is odd and it might related to your OS (perhaps it expands when you hover over it?) because it looks thin in the before and after.

this is what thin looks like on firefox macos

normal:

thin:

[clicktodev]

A̶l̶i̶g̶h̶t̶, t̶h̶e̶ s̶i̶d̶e̶b̶a̶r̶ s̶c̶r̶o̶l̶l̶b̶a̶r̶ w̶i̶d̶t̶h̶ i̶s̶ n̶o̶w̶ n̶o̶r̶m̶a̶l̶ a̶n̶d̶ I̶ o̶n̶l̶y̶ k̶e̶p̶t̶ t̶h̶e̶ t̶h̶i̶n̶ w̶i̶d̶t̶h̶ i̶n̶ t̶h̶e̶ a̶u̶t̶o̶c̶o̶m̶p̶l̶e̶t̶e̶ a̶n̶d̶ c̶o̶d̶e̶b̶l̶o̶c̶k̶ s̶e̶c̶t̶i̶o̶n̶s̶.
I'm using scrollbar-width: thin; which has cross browser support in latest browser versions

[jonatanklosko]

Change to the main scrollbar definitely looks good, it has no custom styles at the moment anyway.

For the secondary ones, whenever I use custom styles it's because the scrollbars are too chunky/disruptive. Perhaps scrollbar-width: thin fixes that, but it would be good to get some screenshots from Windows also to get a fuller picture.

[liamcmitchell]

can you please let me know if you are happy with this direction?

+1 for native scrollbar styling and use of color-scheme: dark;.

[clicktodev]

it looks the same as this on windows because chromium based browsers tend to be the most consistent across platforms

[github-actions]

📦 Docs artifacts are ready: https://github.com/elixir-lang/ex_doc/actions/runs/12819941891/artifacts/2445668065

[josevalim]

Thanks everyone for the feedback!

💚 💙 💜 💛 ❤️

[clicktodev]

thanks for merging! any idea when the changes will go live? is it automated deployment on merge?

[DavidOliver]

the aggressive firefox thin behavior is odd and it might related to your OS (perhaps it expands when you hover over it?) because it looks thin in the before and after.

I expect this is the case. The Pantheon desktop environment's scrollbars are somewhat thin by default, and I guess Firefox uses them, but set to (even) thinner. They do expand on hover, but they are still very thin, especially for the search results.

Anyway, I can't say it particularly bothers me. Thanks. :)

[clicktodev]

@DavidOliver can you share what it looks like when expanded?

[DavidOliver]

Sure. Window sized to approximately 1920 x 1080px.

ex-doc-scrollbars-pantheon-firefox.mp4

I'm not sure we should spend too long worrying about this if the scrollbar widths in other DEs and browsers are deemed sufficiently wide.

[clicktodev]

I’m also open to removing the thin style from the sidebar.
Y’all can use it and feel free to remove the thin style if you find it annoying.