One of the more recent fads in web design is to use custom colors for scroll bars. Sometimes this is done to good effect, but more often than not, it becomes more of a problem than helpful. For example, in both its light and dark themes, Mastodon has extremely low contrast between the scrollbar background (the track) and the draggable scrollbar handle which in modern user interfaces indicates both the current position within a scrollable area (such as a web page) and gives an approximation of the size of the scrollable area.

After being annoyed at this for some time, I decided to solve the problem. There are probably browser add-ons for this, but I am wary of installing more add-ons than necessary, especially ones which by necessity must have the ability to muck around with the content of every single page I browse to.

First, locate your Firefox profile directory. On a Linux system, for example, your browser profile will likely be stored in a directory .mozilla/firefox/abcdefgh.* within your home directory, where abcdefgh is a random identifier and the part after the period is some moderately descriptive name (possibly default). Regardless of the platform you are using Firefox on, you should be able to navigate to about:support and look at the Profile Directory to obtain the full path to your profile directory.

Second, if under it you do not already have such a directory, create a directory named chrome. (This has nothing to do with Google’s web browser, but mostly refers to the parts of the web browser surrounding the actual web page: tabs, address bar, windowing controls, and so on.)

Third, within the chrome directory, create a plain text file named userContent.css and put something like the following in it:

html {
    scrollbar-color: yellow navy !important;
    scrollbar-width: auto !important;
}

For scrollbar-color, the first color is for the handle, and the second color is for the scrollbar background. You can use whichever colors you like, but you should use colors that contrast against colors typically used as background on pages that you regularly visit. You can specify a color in any way that works in CSS, including by CSS color name (as in my example above), a hexadecimal RGB value (such as #d2691e or #ff0), or using the rgb() CSS color function.

If there is, for example, only a single domain which is problematic, you can restrict the rule to only that domain by using a @-moz-document property, like so:

@-moz-document domain("example.com") {
    html {
        scrollbar-color: yellow navy !important;
        scrollbar-width: auto !important;
    }
}

Fourth, save that file, and then open a Firefox browser window and navigate to about:config. If you have not disabled it, you will get a scary warning about the need to be careful. Proceed past that warning and then, in the search field at the top of the page you get to, enter toolkit.legacyUserProfileCustomizations.stylesheets. Verify that the entry that shows up has that name.

If the value shows as false, then double-click on it to change its value to true. If the value already shows as true, you are done here. Close that tab.

As a last step, completely restart the browser by closing all Firefox windows and then restarting Firefox.

Navigate to a long web page, such as a favorite blog, social media or news site, and look at the scroll bar. Its colors should now reflect your choices, rather than that site’s designer’s.