Scrollbars appearance in Darkmode

[PaarthAgarwal]

There comes a point when there are 3 vertical scrollbars and 1 horizontal scrollbar on one page, which looks a bit odd, particularly in dark mode.

In dark mode:

In light mode:

Quick fixes I have in mind:

1. Change the colour of scrollbars for dark mode.
2. Make it slimmer, more transparent and may even make the slider a bit curved.

Actions

1. Work out why the scrollbar on the TOC is showing a horizontal scroll and ensure that it no longer does that, content should wrap in this container.
2. Potential - add scrollbar-width: thin; to the inner and main TOC containers with a note about progressive adoption

[tbrlpld]

Can you override the system scroll bar styles with CSS alone?

Why is there even scroll bars around the page TOC? I feel having the page TOC static would be ok and not as annoying as the previously static main TOC. And the horizontal scrolling should definitely be avoided.

[PaarthAgarwal]

Can you override the system scroll bar styles with CSS alone?

Yes, I think we can.
https://css-tricks.com/almanac/properties/s/scrollbar-color/

Why is there even scroll bars around the page TOC?

I added it because there was an issue for it
#9

[tbrlpld]

Ah, fair enough. I forget which page was the use case.

But i guess preventing horizontal would still be good

[lb-]

I agree preventing horizontal scrolling would be good and an action from this issue.

I am not convinced styling the scrollbar is a good option, I think that it can come across as tacky and it works against the OS's decision on styling here.

However, we could look at just using the slimmer scrollbar-width option.

• https://css-tricks.com/almanac/properties/s/scrollbar-width/
• https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width
• https://caniuse.com/?search=scrollbar-width

But it might be a while before browsers support it, however, it could be added with a comment that it will work as browsers adopt it.

[lb-]

Note - the PR #215 only fixed the horizontal scroll but I think that is sufficient for now.

If we feel that we must do some other styling hacks to change the look of the scroll bars we can raise a new issue.