Custom Scrollbars is a Firefox and Chrome extension that lets you set the color and width of the scrollbar

Ashwin
Apr 25, 2021
Firefox add-ons, Google Chrome extensions
|
20

Do you like customizing your web browser? A lot of people use themes to give the browser a new look. Some take it up a notch and use a custom CSS file, to make it unique.

Custom Scrollbars is a Firefox and Chrome extension that lets you set the color and width of the scrollbar

Most themes don't change all elements of the interface, especially the scrollbar.  Custom Scrollbars is a Firefox and Chrome extension that lets you set the color and width of the scrollbar.

Custom Scrollbars will not change the color of the bars by default. Go to the add-on's options page, and toggle the Yes button under "Use Custom Colors". A couple of new setting should appear, these allow you to set the color of the scrollbar's thumb (the bar that you click and drag) and the track.

Custom Scrollbars set a custom color

The settings page has a Live Preview section that shows you what the scrollbar looks like, it's an interactive demo, so try it before applying the changes. There are two ways to set the shade, either use the color wheel to pick the gradient, or enter a specific Hex color code in the box. The two sliders next to the wheel can be used to adjust the hue and the transparency of the scroll bar and track. If you want to revert to the default colors, disable the custom color option. Doing so however makes the add-on forget the previous color settings.

Custom Scrollbars width

You can optionally modify the scrollbar's width with this add-on, but it doesn't let you set the values manually. Instead, there are three values, Default, Thin, and Hidden. The thin setting makes the scrollbar about a third of the original's size. The other option doesn't just hide the bar, it removes it entirely, i.e. try clicking the edge with the mouse, the page will not scroll. But you can still use the mouse wheel, arrow keys, Page Up/Down keys to scroll a page.

Custom Scrollbar has an option to control how websites can override your settings, you can prevent sites from doing so entirely. Or, you can let the websites change only the color or just the width or both options. It worked on all websites that I tried it with. The add-on's description mentions that it on does not work with Facebook, and is a known issue. When I tried it on Facebook, it worked, so the description is probably outdated.

Don't forget to hit the save button at the bottom of the extension's settings page, to apply the modifications you made. I had no issues using the add-on with different themes either.

Custom Scrollbars colors

The only problem I had with it was on Twitter, where the colored bars appeared in different sections of the site, but that was because I'm using a script (GoodTwitter2), the normal site works fine with Custom Scrollbars.

Custom Scrollbars is an open source add-on. Download it for Firefox and Chrome. The latter was released recently, but works just as well as the Firefox plugin. The add-on does not offer a way to allow specific websites to use their own scrollbar, nor can you set a custom color on a per-website basis, but that's just me nitpicking.

Trouble finding the right color that goes with your theme? Use a color picker tool like ColorMania to help you find the color code of any element on the screen.

Summary
software image
Author Rating
1star1star1star1stargray
4 based on 5 votes
Software Name
Custom Scrollbars
Operating System
Firefox, Chrome
Software Category
Customization
Price
Free
Landing Page
Advertisement

Tutorials & Tips


Previous Post: «
Next Post: «

Comments

  1. Anonymous said on April 29, 2021 at 8:58 pm
    Reply

    Great find!

  2. pwned said on April 27, 2021 at 1:41 pm
    Reply
  3. Peter Newton said on April 26, 2021 at 9:54 pm
    Reply

    This is a bit off topic, but for anyone wondering if an upgrade from FF 87 to 88 gives you no choice about your preference of interface, [standard over proton and vice versa], I just did the switch from 87 to 88 and my customised standard interface is still intact, including compact [density].

    I’m not sure if we will still have the choice in the future, but Martin has information on this site which explains how to enable or disable the proton interface. How long this remains an option I have no idea.

    PN Internet User

  4. beemeup5 said on April 26, 2021 at 1:36 am
    Reply

    I’ve been using custom scrollbars for ages using the NewScrollbars (aka NoiaScrollbars) addon for firefox (back in the XUL days) and now on Pale Moon.

    1. Peterc said on April 26, 2021 at 7:59 am
      Reply

      @beemeup5: Me too!

  5. plusminus_ said on April 25, 2021 at 9:05 pm
    Reply

    (I also found a userstyle that works similarly; the userCSS version is nice: https://userstyles.org/styles/177056/dark-scrollbars-quantum-nox)

  6. plusminus_ said on April 25, 2021 at 8:53 pm
    Reply

    Fantastic, thin scrollbars for all my tabs!

    thank you

  7. Tom Hawack said on April 25, 2021 at 8:27 pm
    Reply

    I dislike scrolbars. Here on Firefox, in my profile’s chrome/userContent.css I add:

    :root{scrollbar-width: none;} – Does it all with a few exceptions on some Firefox pages.

    Nevertheless, to have an idea of my screen’s position on long pages I use the ‘Scroll Progress New’ Firefox extension which displays the % of the scroll on one of the screen’s corners.

    Otherwise, keeping the scrollbars, there’s a userChrome.css setting which can come in handy, Haven’t tested it for some time given I opt for no scrollbars, not certain it still works, choose your colors and width :

    :root{scrollbar-color: rgb(96,96,192) transparent;}
    *{scrollbar-width: medium;}

    The day userChrome.css and userContent.css get removed by Mozilla, if ever, will be a sad day.

    1. Brom said on April 26, 2021 at 1:32 am
      Reply

      Mate, this extension’s doing the same thing, and is useful for those who don’t care to edit userChrome.css manually.

  8. ali said on April 25, 2021 at 7:35 pm
    Reply

    long life rescroller by David Watkins.

  9. Throw Out the Bent Bananas said on April 25, 2021 at 6:47 pm
    Reply

    Transparent scrollbar overlays are best

  10. beefcake said on April 25, 2021 at 5:07 pm
    Reply

    This should be in the browser without having to use an extension.But Firefox developers and designers these days are a bunch of lazy no good snobs.Unless of course they can remove even more features in the browser and make shitty UI designs.

    1. Anon said on April 26, 2021 at 1:29 am
      Reply

      I hate the pointless feature removal too, but this is hardly something useful and important enough to be included by default. Perfectly fine as an extension.

      1. jelabarre59 said on January 25, 2022 at 10:08 pm
        Reply

        I think the point was that Firefox shouldn’t have *broken* this in the first place, thereby requiring an extension to replace functionality that shouldn’t have been removed in the first place.

        This should be *user-configurable*. It’s not up to anyone else to dictate how MY desktop and applications should look/work. They want to make it not display scrollbars, arrows, and thumbs you can actually see *by default*? That’s fine, but *don’t* take away my ability to configure my system in my preferred way. This is nothing more than the arrogant attitude of MSWindows and the GNOME folks.

  11. rottenscoundrel said on April 25, 2021 at 4:52 pm
    Reply

    OR, use the stock Linux Mint and do it System-wide without add-ons. :D

    https://www.reddit.com/r/linuxmint/comments/cnvzaq/scroll_bar_width_mint_in_192/

  12. Dumbledalf said on April 25, 2021 at 1:07 pm
    Reply

    This was not needed in XP, Vista and 7, because thw UI had depth and was easy to distinguish between elements, in 8 and 10, the scrollbar is almost invisible.

    1. Brom said on April 26, 2021 at 1:26 am
      Reply

      Can see it fine here mate. Perhaps get yourself a new set of specs, eh?

  13. Anonymous said on April 25, 2021 at 11:38 am
    Reply

    Thank you for this. The scroll bar colors aren’t contrast-y enough and it’s a pain some times to find it’s current position.

  14. owl said on April 25, 2021 at 11:06 am
    Reply

    In my case, I do not like to display scrollbars or toolbars, because I want to configure the screen simply. In other words, I “hide” everything except the Address bar (URL bar), and I only display the “Tree Style Tab”. (This is just my preference, so don’t worry about it.)
    I’m not interested in this extension because I don’t show scrollbars, but I’m sure it will be of interest to many people.

  15. nate sokol said on April 25, 2021 at 9:45 am
    Reply

    As usual, another great find. Thanks!

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.