Skip to content

Instantly share code, notes, and snippets.

@Xintaur
Forked from Sporif/dark-scrollbar.as.css
Last active November 6, 2019 18:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Xintaur/559da1b2bc05c7b86c00f21c89d8643e to your computer and use it in GitHub Desktop.
Save Xintaur/559da1b2bc05c7b86c00f21c89d8643e to your computer and use it in GitHub Desktop.
Dark scrollbar for Firefox 57. Tested on Windows 10. Fixed element scrollbars and resize on page zoom. Requires https://gist.github.com/Sporif/db6b3440fba0b1bcf5477afacf93f875
scrollbar, scrollbar *, scrollcorner {
-moz-appearance: none !important;
--scrollbar-width: 0.67vw;
--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 scrollbarbutton {
width: var(--scrollbar-width) !important;
min-width: var(--scrollbar-width) !important;
}
scrollbar:hover scrollbarbutton {
background-color: #444444 !important;
}
scrollbar scrollbarbutton:hover {
background: #646464 !important;
}
scrollbar scrollbarbutton:active {
background: #00ACED !important;
}
@dakshj48
Copy link

dakshj48 commented Nov 5, 2019

Is 0.67vw, the default scrollbar width of Firefox?

@Xintaur
Copy link
Author

Xintaur commented Nov 5, 2019

Is 0.67vw, the default scrollbar width of Firefox?

The default width of the Firefox scrollbar is 17px, like on most other browsers. The default scrollbar (unlike a custom one) is not affected by resizing tho. I just chose 0.67vw because it was roughly the same size as Sporif's version on a 1080p screen.
If your screen has a different resolution it will have a different size, so just change it to whatever size you need it.

@dakshj48
Copy link

dakshj48 commented Nov 5, 2019

Okay thanks. I can confirm that this works for Firefox 70.0.1 on Windows 10.

@e-t-l
Copy link

e-t-l commented Nov 6, 2019

Works great, thanks @Xintaur!

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