feat: add a custom scrollbar theme for the scrollable wrapper

[PhilReinking]

This PR improves upon PR #319

Native Scrollbars are at least on macOS "light-themed" even when the system is in dark mode.
To make the editor look more consistent in dark mode, I added custom scrollbar CSS, which turns the scrollbar for the .scrollable wrapper dark.

Please note: this works only for webkit based browsers.

Please view to following screenshots:

Before:

After:

[tommoor]

Hey @PhilReinking – this is an issue when you're using a mouse, or have the settings to "always show scrollbars", honestly it baffles me that chrome doesn't use a dark style by default still.

Unfortunately adding this css does mean a regression in the case of using a trackpad, which currently looks like this:

…but with the css above gains a permanent scrollbar.

If you're aware of a css combo that would achieve both that would be very mergable.

[PhilReinking]

Hey Tom, you're right. These changes would always enable the scrollbar regardless of the device. I was not aware of that.

I just made a quick check, and I think it would affect:

• OSX devices with touchpads usage only
• mobile devices
• IE12 Edge in Tablet Mode

I use my MacBook in combination with a mouse, and therefore the scrollbars are not hidden. Without knowing much about the most popular devices used to access Outline, it may be possible that most users are distracted by this white scrollbar in dark mode.

So I just want to mention two solutions I see from here:

1. Enforce a consistent UI across WebKit browsers by enabling the scrollbar with the CSS changes. Maybe it would be a better fit if we make the scrollbar thinner?
2. Use a JavaScript snippet to detect if the operating system hides the scrollbar, and only add the new scrollbar CSS if it is not hidden. The Modernizr library provides a snippet we could use for that.

Let me know if one of this solutions would be the way to go or maybe someone can come up with something better :)

[PhilReinking]

I just saw that Gmail also uses custom scrollbars on the sidebar, but they only show them on hover. So this may be a third solution sitting between the native behavior and the custom CSS.

[tommoor]

I would mind the permanently visible scrollbar so much if it didn't extend outside of the horizontal table bounds – but this does have to be the case for the "grips" that appear on hover:

With that in mind the css show on hover seems like a pragmatic solution 👍

[PhilReinking]

Hey Tom, I've added the scrollbars on hover only. I also found the CSS needed to make the scrollbars work in Firefox with a nearly identical look.

This is how it should look in a Webkit browser now:

[tommoor]

Great, confirmed in FireFox.

Would you mind adding values to theme specifically for the scrollbars. scrollbarBackground and scrollbarThumb instead of re-using (the colors can be mapped to the same). I think it's good to go then

[PhilReinking]

Done 😊