Why is the scrollbar in Firefox changing color on certain sites like Youtube?
I have noticed in the last few days that the scrollbar has been changing colors from site to site. On most, it remains a light grey, but on some sites, most notably Youtube, it has turned a darker color, with the scrollbar turning outright black on videos now from Youtube, but only if I'm not signed in. Meanwhile if I'm signed in, it's a darker shade of gray, but not outright black. Does anyone know what's causing this? I will include screenshots, with the scrollbars circled. The first shows the scrollbar in its normal coloration, and the following three showing Youtube, first on its main page, then one with me signed in, another with me signed out, growing progressively darker.
Is this a glitch, or something to do with their coding, or what? If someone can answer this, I'd love to know what I'm dealing with here.
All Replies (3)
They're just styling their scrollbars with css. You can modify a color and width of the scrollbar on every page.
TyDraniu said
They're just styling their scrollbars with css. You can modify a color and width of the scrollbar on every page.
So it's not a glitch? Huh, weird. Is there a way to overwrite the stylization, or are we basically stuck with it?
You can add code to the userContent.css file.
/* SCROLLBARS */
*{scrollbar-color:auto !important; scrollbar-width:auto !important;}
It is not that difficult to create userContent.css if you have never used it.
The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.
You can find the button to go to the profile folder under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a plain text file with the name userContent.css (name is case sensitive). In this userContent.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userContent.css file as a plain text file.
In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userContent.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".
You need to close (Quit/Exit) and restart Firefox when you create or modify the userContent.css file.
See also:
- https://www.userchrome.org/what-is-userchrome-css.html
- https://www.userchrome.org/how-create-userchrome-css.html
In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.
- toolkit.legacyUserProfileCustomizations.stylesheets = true