Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

M-Yankov commented Dec 24, 2018

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

@stonecrusher

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link
Owner 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

This comment has been minimized.

Copy link

uhLydn commented Jul 11, 2019

Doesnt work with Firefox 68 anymore.

EDIT: nvm did everything again and it works now.

@xXJOKRXx

This comment has been minimized.

Copy link

xXJOKRXx commented Jul 15, 2019

Doesnt work with Firefox 68 anymore.

It's working fine for me.

@e-t-l

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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
You can’t perform that action at this time.