How to change scrollbar colours?

Here is the way to get nice coloured scrollbars:

Use the link above to get an add-on or with a bit of CSS magic, change them yourself:

  1. Go user’s profile folder
  2. Create the directory/folder ‘chrome’
  3. Create a file called userContent.css
  4. Add the css you need - using this format, then change the colours to suit (named or hex)
  html,body{
    scrollbar-color: yellow blue !important;
   }
  1. Open “about:config” in firefox browser bar

You are looking for this entry:
“toolkit.legacyUserProfileCustomizations.stylesheets”

Search for: “userprof” to find it
If it is ‘false’ click on the toggle button and make it ‘true’

  1. Completly close firefox, then start it up again to see the effects of your CSS.

As I have a custom theme, thanks to Firefox Color, I took hex colours from that for my new look scrollbar.



Web Pages I referenced to get this fix:

https://support.mozilla.org/en-US/questions/1280594 ( cor-el’s post)
https://www.userchrome.org/firefox-changes-userchrome-css.html
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
https://www.howtogeek.com/334716/how-to-customize-firefoxs-user-interface-with-userchrome.css/

2 Likes