Skip to content

Instantly share code, notes, and snippets.

@Sporif
Last active July 28, 2021 04:55
  • Star 21 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Sporif/ba3c9a9bcec1114f9f6bbd24079be69f to your computer and use it in GitHub Desktop.
Dark scrollbar for Firefox 57. Tested on Windows 10. Requires https://gist.github.com/Sporif/db6b3440fba0b1bcf5477afacf93f875
scrollbar, scrollbar *, scrollcorner {
-moz-appearance: none !important;
--scrollbar-width: 10px;
--scrollbar-height: var(--scrollbar-width);
}
scrollbar, scrollcorner {
background: #282828 !important;
}
scrollbar[orient="vertical"] {
width: var(--scrollbar-width) !important;
min-width: var(--scrollbar-width) !important;
}
scrollbar[orient="horizontal"] {
height: var(--scrollbar-height) !important;
min-height: var(--scrollbar-height) !important;
}
scrollbar thumb {
background: #646464 !important;
}
scrollbar thumb:hover,
scrollbar thumb:active {
background: #00ACED !important;
}
scrollbar:hover scrollbarbutton {
background-color: #444444 !important;
}
scrollbar scrollbarbutton:hover {
background: #646464 !important;
}
scrollbar scrollbarbutton:active {
background: #00ACED !important;
}
@M-Yankov
Copy link

M-Yankov commented Dec 24, 2018

@Sporif I miss the top and bottom arrows, is there a way to show them ?

@stonecrusher
Copy link

stonecrusher commented Feb 17, 2019

@Sporif Same problem :-(
The scrollbar * { -moz-appearance: none !important; } seems to be the culprit.
Dirty workaround to at least show the buttons (but without arrow): Add

scrollbar scrollbarbutton::after {
    content: url() !important;
}

@e-t-l
Copy link

e-t-l commented Jun 13, 2019

Love the look of this, but is there any way to make it selective in which scrollbars it affects? For example, many websites have scrollable elements within the webpage, and I'd prefer if dark-scrollbar left those how alone. Is this possible?

@Sporif
Copy link
Author

Sporif commented Jun 13, 2019

@elijahtlang I don't think that's possible with just css, either you style all the scrollbars on a page (including the main one) or none of them.

@uhLydn
Copy link

uhLydn commented Jul 11, 2019

Doesnt work with Firefox 68 anymore.

EDIT: nvm did everything again and it works now.

@OmarNamis
Copy link

Doesnt work with Firefox 68 anymore.

It's working fine for me.

@e-t-l
Copy link

e-t-l commented Jul 16, 2019

@bunnyboothe What do you mean you did everything again? I'm on FF 68.0 and it's still not working for me. I just have default scrollbars right now. Please advise.

EDIT: I made this fix in the userChrome.css and it's all working now :)

@rinaldi6109
Copy link

rinaldi6109 commented Aug 4, 2019

@e-t-l can you explain what you have done exactly? I'm struggling with FF 68 yet. :(

EDIT: I had to add to include Sporif. But scrollbar arrows disappeared. :(

@e-t-l
Copy link

e-t-l commented Aug 6, 2019

Okay it worked with sporif's userchrome.css code? I believe they have some info in the comments of that page regarding how to activate the scrollbar arrows. Personally I leave them deactivated so I don't know offhand.

@e-t-l
Copy link

e-t-l commented Aug 12, 2019

@Sporif I noticed these scrollbars get larger when the webpage is zoomed in. Is there a way to disable this scaling?

@Xintaur
Copy link

Xintaur commented Nov 5, 2019

@e-t-l They get larger because he is using pixel to determine the size instead of view-width.

Edit: Try this one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment