# How to change scrollbar colours?

**URL:** <https://discourse.mozilla.org/t/how-to-change-scrollbar-colours/61579>\
**Category:** Themes\
**Created:** [June 8, 2020, 8:35am UTC](https://discourse.mozilla.org/t/how-to-change-scrollbar-colours/61579 "2020-06-08T08:35:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![PaulD](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/pauld/32/37957_2.png) [@PaulD](https://discourse.mozilla.org/u/PaulD)\
**Post date:** [June 8, 2020, 8:35am UTC](https://discourse.mozilla.org/t/how-to-change-scrollbar-colours/61579/1 "2020-06-08T08:35:59Z")

</div>

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](https://discourse.mozilla.org/t/changing-the-scroll-bar-colours/32176)  
Though, I still don’t know how to change the scrollbar colour.

Firefox 77.0.1  
64bit Linux version

Thanks

---

<div class="post-metadata">

**Author:** ![juraj.masiar](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/juraj.masiar/32/30587_2.png) [@juraj.masiar](https://discourse.mozilla.org/u/juraj.masiar)\
**Post date:** [June 8, 2020, 11:06am UTC](https://discourse.mozilla.org/t/how-to-change-scrollbar-colours/61579/2 "2020-06-08T11:06:20Z")

</div>

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

> **[scrollbar-color - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color)**
>
> The scrollbar-color CSS property sets the color of the scrollbar track and thumb.

You can test it with my Scroll Anywhere extension:

> **[ScrollAnywhere – Get this Extension for 🦊 Firefox (en-US)](https://addons.mozilla.org/en-US/firefox/addon/scroll_anywhere/)**
>
> Download ScrollAnywhere for Firefox. Scroll page without touching scroll-bar! 
> Press Middle (Right / Left) mouse button anywhere on the page to scroll just like with scrollbar.
> 
> Features also:
> \- "grab and drag" scrolling
> \- customizable scrollbars!
> \-...

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

---

<div class="post-metadata">

**Author:** ![PaulD](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/pauld/32/37957_2.png) [@PaulD](https://discourse.mozilla.org/u/PaulD)\
**Post date:** [June 8, 2020, 2:36pm UTC](https://discourse.mozilla.org/t/how-to-change-scrollbar-colours/61579/3 "2020-06-08T14:36:01Z")

</div>

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 👍

---

<div class="post-metadata">

**Author:** ![PaulD](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/pauld/32/37957_2.png) [@PaulD](https://discourse.mozilla.org/u/PaulD)\
**Post date:** [June 8, 2020, 2:41pm UTC](https://discourse.mozilla.org/t/how-to-change-scrollbar-colours/61579/4 "2020-06-08T14:41:22Z")

</div>

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)

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