Firefox 57 Black UserChrome.css

/* Name this userChrome.css (case sensitive) and put it in your C:\Users\yourname\AppData\Roaming\Mozilla\Firefox\Profiles\yourprofile\chrome, you'll probably have to make the chrome folder. Make sure to use Firefox's own customize option and that you choose Themes --> Dark and Density --> Compact. Then restart Firefox if needed. Also the scrollbar is hidden, uncomment relevant CSS to unhide. (NOTE: This can cause dropdown bars to not show on some sites, but still be useable, or show far below the dropdown menu so it might be advisable to delete the relevant CSS if you're worried about it) FF API doesn't yet have a way to change the scrollbar but it's planned. Or see here: https://www.reddit.com/r/firefox/comments/7f6kc4/floating_scrollbar_finally_possible_in_firefox_57/
There's not a lot of contrast here, for me it's fine, for others it might be a useability issue so you might want to change the opacity of the main interface and increase the brightness of the urlbar and such. Tested with Firefox Nightly 57. Here's what it looks like: https://i.imgur.com/vLOYEky.jpg */

@namespace html url(http://www.w3.org/1999/xhtml);
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.tab-line {
    color: #fff !important;
}
#urlbar .urlbar-input-box {
    text-align: center;
}
.urlbar-input::-moz-selection {
    background-color: #5a5a5a !important;
    color: #ccc !important;
}
.tab-content:not([selected="true"]) {
    background-color: #000 !important;
    color: #aaa !important;
}
.tab-content {
    background-color: #222 !important;
    color: #ccc !important;
}
.tab-content:hover {
    background-color: #333 !important;
    color: #fff !important;
}
#main-window #nav-bar {
    background: transparent !important;
    border: 0px !important;
    opacity: 0.5;
}
#urlbar:hover,
.searchbar-textbox:hover {
    background-color: #222 !important;
    color: #ccc !important;
}
#urlbar,
.searchbar-textbox {
    background-color: #000 !important;
    border: none !important;
    color: #aaa !important;
}
#main-window #TabsToolbar {
    background-color: #000 !important;
}
#main-window #nav-bar {
    background-color: #000 !important;
}
#main-window #PanelUI-button {
    background-color: #000 !important;
}
/*find bar*/

findbar {
    -moz-appearance: none !important;
    background-color: #000 !important;
}
/*context menu & bookmark menu*/

#bookmarks-view,
#historyTree,
#history-panel,
#sidebar-header {
    background-color: #000 !important;
    color: #ccc!important;
    border: 0px !important;
}
#bookmarks-view {
    background-color: #000!important;
    border: 0px !important;
}
menuitem,
menu {
    background-color: #000 !important;
    border: none !important;
    color: #fff !important
}
menuseparator {
    display: none !important;
}
menupopup {
    background-color: #000 !important;
    -moz-appearance: none!important;
    border: 0px !important;
    color: #fff !important
}
menu:hover {
    background-color: #222 !important;
    border: 0px !important;
    color: #fff !important;
}
menuitem:hover {
    background-color: #222 !important;
    color: #fff !important;
    border: 0px !important;
}
arrowscrollbox {
    background-color: #000!important;
    color: #ccc!important;
    border: 0px !important;
}
.toolbarbutton-text {
    color: #aaa !important;
}
#main-menubar,
#nav-bar {
    box-shadow: none !important;
}
menupopup > hbox {
    border: 0px !important;
}
/* URL Hover */

.statuspanel-label {
    background: #000 !important;
    color: #fff !important;
    border: none !important;
}
/* Hide context menu icons */

#context-navigation {
    background-color: #000 !important;
}
/*Private Browsing icon visible*/

#main-window[sizemode="maximized"][privatebrowsingmode=temporary] #private-browsing-indicator-titlebar > .private-browsing-indicator {
    z-index: 1;
}
/*Bookmark toolbar*/

#PersonalToolbar {
    background: #000 !important;
    color: #aaa !important;
}
/* autohide bookmarks toolbar */

#PersonalToolbar {
    opacity: 0.5;
}
/* hide scrollbar */

#content browser {
    margin-right: -17px!important;
    overflow-y: scroll;
    overflow-x: hidden;
}
/* Darken panels to match theme. Thanks anonymous guy on internet! */

.panel-arrow {
    filter: invert(33%);
}
.panel-subview-body,
#appMenu-zoomReset-button {
    color: var(--lwt-text-color) !important;
    background: var(--url-and-searchbar-background-color) !important;
}
.panel-subview-footer,
[class^="PanelUI-"] {
    color: var(--lwt-text-color) !important;
    background: var(--toolbar-bgcolor) !important;
}
#PopupAutoCompleteRichResult .ac-title-text {
    color: var(--lwt-text-color) !important;
    filter: opacity(.7);
}
#PopupAutoCompleteRichResult .autocomplete-richlistbox {
    background: var(--url-and-searchbar-background-color) !important;
}
/*stops possible clashes with extension popups*/

.webextension-popup-browser {
    background: #fff;
}
/* Dim unloaded tabs */

.tabbrowser-tab[pending=true] {
    opacity: .5;
}
/* urlbar suggest searches background color */

panel[type="autocomplete"],
panel[type="autocomplete-richlistbox"],
.autocomplete-history-popup {
    background: #000 !important;
    border: #333 !important;
}
/*
 * Description: Makes the activity stream page look decent with the dark theme.
 *
 * Screenshot: https://imgur.com/a/WcxGk
 *
 * Contributor(s): Andrei Cristian Petcu
 */

.browserContainer {
    background-color: var(--url-and-searchbar-background-color, hsla(0, 0%, 100%, .5)) !important;
}
#sidebar {
    background-color: black !important;
}
.sidebar-placesTree {
    background-color: black !important;
}