From today, Firefox visitors will see a dark coloured scrollbar on the default theme. The plain theme, if you have Javascript enabled, will remain with the default scrollbar.

And so ends an eighteen year wait for this functionality. The reason why this has never been supported before is because there was never an official CSS specification for styling scrollbars. Now there is, well, sort of. There’s a working draft specification it’s not really intended for production at this time, it is certainly incomplete at the moment. And the Firefox implementation is buggy. The only way to select whether your scrollbar is highlighted with a bright colour or with a dark colour is to find the threshold value of the colour you’ve selected – for grey that threshold is #757575 – and that could be a different value for any other browser that adds support for this. But it’s a good start, and I hope you enjoy.

Grab yourself Firefox to see it for yourself. You’ll also be fighting back against Google if you do – Google’s monopoly with the Chrome web browser has had a devastating impact on both privacy and on competition. A preliminary ACCC report released three days ago spells it out plainly. It makes the same recommendation I have already articulated very clearly in the past – that including the Chrome web browser and/or the Google search engine as the defaults on new consumer devices (be they laptops, smartphones, tablets, etc) is anti-competitive and show be outlawed:

Preliminary Recommendation 3—choice of browser and search engine

The ACCC is considering recommending that:
(a) suppliers of operating systems for mobile devices, computers and tablets be required to provide consumers with options for internet browsers (rather than providing a default browser), and
(b) suppliers of internet browsers be required to provide consumers with options for search engines (rather than providing a default search engine).
The ACCC considers that where options for internet browsers and search engines are presented, no option should be pre-selected.

Firefox is MUCH better than Chrome. Chrome exists purely for Google to exert their market dominance. Do yourself a favour and if you’re using Chrome, at least install Firefox and try it out to see if you like it.

Update (14/12/2018)

After quite a bit of testing I have found a few bugs that webmasters/developers should be aware of. I have started a Whirlpool topic if anyone is interested in discussing implementation. Here is the code as currently implemented here:
CSS:
html {scrollbar-color: #7d7366 #29241e;}
textarea {scrollbar-width: thin; overflow-y: auto;}
.plainscroll {scrollbar-color: auto;}

Javascript:
document.getElementsByTagName('html')[0].setAttribute("class", "plainscroll");

The Viewport scrollbar must be set on the root element, not on the body element. It is then inherited by every other element, so if you were wanting to affect only the Viewport scrollbar and leave all other scrollbars as the browser default you could pair these CSS rules:

html {scrollbar-color: #757575 #333;}
body * {scrollbar-color: auto;}

You must use the value “auto” to reset it it to the browser’s default. The value “unset” is invalid, and the value “ThreeDFace Scrollbar” is valid but merely provides a 2D scrollbar in the system colours.

Setting the track colour to “transparent” removes the up and down arrows from the scrollbar, making those buttons invisible. This isn’t a problem for thin scrollbars though because those buttons are not present on the thin scrollbar – at least in Firefox’s early implementation. Who knows how other browser vendors will render thin scrollbars at this point (therefore I would advise against using transparent tracks).

The scrollbar thumb highlights brighter if the colour is below a certain brightness threshold, and for grey that threshold is #757575. Any brighter and the thumb highlights darker when hovered or selected. There is no option at this time to select whether you want a brighter or darker highlight, and one would assume as other browser vendors implement CSS scrollbars that the threshold value may vary, or maybe some will always highlight brighter who knows!

Setting the scrollbar-width to “thin” is very buggy. It can result in the scrollbar not coming up at all. This is what happened to the comment reply textbox in my tests, as well as on other websites I tested. This is why I had to add a declaration to the overflow as you see above “overflow-y: auto”. Explicitly setting the overflow value to “auto” or to “scroll” appears to remedy this bug. Therefore my advice to anyone using CSS scrollbars in production is to err on the side of caution for now – either don’t set thin scrollbars, or where you do make sure you explicitly set the overflow value and test it.

Remember that this CSS functionality is experimental right now. Not really ready for production use, I’m an early adopter anyway but be forewarned! It’s still in early development, the specification itself is only a working draft and not finalised and is clearly missing needed functionality, and who knows how buggy the other browsers will be as they adopt it too. So proceed with caution!