How to change scrollbar colours?

Hi, Just wondering how we can change the scrollbar colours? I have Firefox Color installed, created my own theme, which is great for me. Except for the scrollbar, which is grey on grey - difficult to see at times as you can imagine.

I did look at this post: Changing the Scroll bar colours
Though, I still don’t know how to change the scrollbar colour.

Firefox 77.0.1
64bit Linux version

Thanks

I’m not sure if it’s supported by theme API, but I know it’s possible using extension (content script).
See the docs:

You can test it with my Scroll Anywhere extension:


(in the Options page / Scrollbars / Scrollbar slider color)

Thanks for that @juraj.masiar not quite what I was looking for, but you sent me off on an adventure with that first link.

I have my answer on how to do it now - thank you :+1:

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/

1 Like