Previously known as "Firefox 57+ full dark theme with scrollbars and multirow tabs", I decided to give it an actual name instead of leaving it as just a description.
Since Firefox 69 (current nightly), you have to enabletoolkit.legacyUserProfileCustomizations.stylesheetsinabout:configfor userchrome and usercontent to be loaded at all as per bug #1541233.
This theme is mainly intended for the stable release of Firefox (This means that while it will most probably work with nightly and ESR for the most part, it may have less support for those versions).
You can use it to fully change the colors of most of firefox UI to dark-gray colors (with #222-#444 colors mostly), including scrollbars, tooltips, sidebar, as well as dialogs. With the files here you can also as remove some context menu options, enable multirow tabs, change the font of the url bar...
Of course... you could as well use these files to color your firefox any way you wanted, the only thing you'd have to do is change the correct values (what each class or id does is commented above each) in the .css files (as far as you know some basic css or color coding, it shouldn't be too hard) using notepad, or some code editing program (such as notepad++ on Windows).
To change these you will have to use the right hex codes. You can find a color picker to hex code in this page.
If you want to edit a file and you want to use notepad (windows), you may see that all code is a wall of text without any line break (the files get compressed like that when uploaded, so there isn't much to do there), in which case you can always drag & drop the file you want to modify into any internet browser window (like firefox) to see the actual code with line breaks, and then copy & paste it back to the open file with notepad, making it regain the line breaks on notepad again.
This problem doesn't happen if you use a code editor such as notepad++, atom, sublime text...
Files updated:
- Userchrome.xml: Updated them to the lastest released version.
- Bookmarks-toggler.uc.js: Added better compatibility with the navigation hide toggler script.
- *-tabs-below-*.uc.js: Deleted these alternative versions, and added tabs below standalone files for this tweak.
- Tabs-below-Menu-onTop/overTabs.as.css: Added standalone files for tabs below tweak for easier installation (inside multirow and other functions folder).
As for using this theme to replace some functions of Tab Mix Plus, I'll keep the functions that can be done through CSS here, and I'll try to point addons that cover some of the missing functions, but as of right now, the files in this repository covers multi-row tabs, keep the close button on tabs always visible, and color-coding tabs when they are loaded, unloaded, etc...
Most other functions of Tab Mix Plus can already be "simulated" changing some about:config settings:
- To keep FF open even after closing the last tab ->
browser.tabs.closeWindowWithLastTab to false.
- To open a search result typed on the URL bar on a new tab ->
browser.urlbar.openintab to true.
- To open a search result typed on the search bar on a new tab ->
browser.search.openintab to true.
- To open bookmarks on a new tab instead of the current tab ->
browser.tabs.loadBookmarksInTabs to true.
- To force popups on new tabs instead of windows ->
browser.link.open_newwindow.restriction to 0 (should be 2 by default).
- Open related tabs (the ones you open) as the last tab in the tab bar ->
browser.tabs.insertRelatedAfterCurrent to false.
... or through extensions (not a comprehensive list, only the ones themed here are mentioned), like Tab session manager, Undo closed tabs button.
If you are on windows and only want the theme or multirow, you can use the batch file installers inside the installers folder.
If you are using Linux or Mac, or want to add some more functionability (like deleting some useless context menu commands), you will have to use the methods described inside one of the 3 main folders of this repository:
- CSS tweaks: Enables removal of context menu items, multirow bookmarks, changing tab bar position (so that it could be under the bookmarks bar for example)
- Full dark theme: Gives dark colors to firefox UI, including the scrollbars and the tooltips. Can also change the background image of
about:homeand the header image used as a persona. - Multirow and other functions: You can find the JS files that add extra functionability to Firefox that couldn't be done with CSS alone.
You can turn the features you want on or off changing the commented lines on userchrome.css (To change them you just have to open it with notepad or any code editor, and encase between "/*" and "*/" (without the quotation marks) the lines you don't want to take effect). Of course, if you think that you are NEVER going to use certain feature, you can always delete the specific lines you don't want without any other side-effect.
You can find a video tutorial on how to install the theme without installers here.
You can apply the global dark userstyle found inside the Global dark userstyle folder to theme general sites with an all-around CSS stylesheet. You need stylus addon to use it.
While it's not perfect (meaning that you should still use per-site styles for the sites you visit often), it can help to darken most sites when browsing around general sites that you don't visit often, and thus don't want/can't find a specific userstyle for them.
It is recommended that you check the Global dark userstyle readme to know how to add site exclusions to the global userstyle.
You can apply a dark theme to certain addons changing the UUID's of them inside the addons.css file inside the "Full dark theme" folder (more instructions on how to do that inside the addons file).
Here is a list of the themed addons:
- Ant Video Downloader
- Cookie autodelete
- Download Manager (S3)
- History autodelete
- HTTPS Everywhere
- Noscript
- Notifier for Gmail (restartless)
- Multi-accounts containers
- OneTab
- Popup Blocker Ultimate
- Privacy badger
- Tab session manager
- Temporary containers
- Ublock Origin
- Undo closed tabs button
- Video Download Helper
- Viewhance
You might have noticed that we no longer have Lastpass dark theme inside addons.css anymore. This is because at the time that addon was themed, I didn't know much about it. After some research it seems like Lastpass has had a history of security issues (in 2011, 2015, 2016, and 2017), as well as there being other open source alternatives out there that seem to be more reliable, like Bitwarden (it also has a built-in dark mode) which is available for all major browsers.
This theme colors scrollbars using usercontent.css to give them a basic re-color.
If you want a different style on the scrollbars, you can try using the scrollbars.as.css file inside the Alternative scrollbars folder, which will make the scrollbars look more rounded and will have some sort of "puffy" effect when clicking them.
If instead you just don't want scrollbars to show at all but keep scrollability, you can do this through usercontent.css setting the variable --scrollbars-width to none (should be the first rule on the :root section (almost at the start)), and deleting scrollbars.as.css.
If you aren't using the usercontent provided here for some reason, you can always just add this code to your self-created usercontent.css:
*|* {scrollbar-width: none !important}
As of 26/03/2019 I stopped offering active support for new features or issues. This doesn't mean that I won't be mantaining the project, it just means I won't be taking feature requests nor unrelated issues to the functionability offered by the files inside this repository anymore.
If you find some problem that is directly related with any of the functions offered by any of the files in this repository, you can comment it inside the relevant commit that you think may have affected the function that is giving you trouble. If you can't tell which, comment in the last one. Comments about new functionability or things that aren't related to the actual functionability of the files will be ignored (You can already ask about problems you may have with firefox on r/firefox or r/firefoxCSS subreddits, or on Firefox support pages).
Make sure you downloaded the raw files from the repository (either cloning the whole repository, downloading the RAW version of the files, or copying the code you are interested in yourself), and placed them inside the chrome folder inside the root profile folder (more information on that inside the dark theme section of this repository).
If you are using Firefox 69+, you also need to have enabled toolkit.legacyUserProfileCustomizations.stylesheets in about:config for userchrome or usercontent (or any file in the chrome folder) to be loaded at all as per bug #1541233.
The fastest way to solve the "blinking" white screen is to change the default web background color on Firefox settings > General > "Colors..." button > Background, which will make the blinking dissapear and be changed to the color you set up. This, although, can cause some issues on some very few and specific pages like BBC, where they don't set a background color to override the one set here (the number of sites with this problem is very small, most sites override the background color set by this setting).
Since it's anonymous content of the browser we can't theme it through userChrome or userContent, which is why you will have to apply the fix inside Sync-tabs-sidebar.as.css. It requires the use of external CSS files loading, which is enabled thorugh userchrome.css and userchrome.xml.
If you only want the dark theme, use the default userchrome.css file inside "Full dark theme", which won't make the context menu commands dissapear. In case you want to use the features part of the theme, just delete everything after the line that says /* CONTEXT MENU COMMANDS */ (you can find it using the search option on notepad, or the code editor you are using).
In case you still want to delete some commands but not all, just comment out the ones that you want to appear, and leave as active the ones that you want to dissapear.
For example, this is active, so the command is hidden:
/* Send image... */ #context-sendimage,
...But this is commented out, so the command will show on the context menu:
/* Send image... *//* #context-sendimage,*/
You will see that the ones that I have commented out by default only have the starting "/*" of the comment after the description of what they are, since the closing "*/" would come from the next description comment below them.
The bookmarks toolbar text/tabs text color is black and I can't see the letters over the dark background.
This is caused by your persona (lightweight theme), and while you could change these settings inside userchrome, I thought it was better to just change the settings on the persona directly (since not all personas will look the same). To do so you'd have to open about:config, and search for lightweightThemes.usedThemes. Once there, find the "textcolor" setting and type any color you'd want to use instead of black or the color being used by the theme (use #fff for white). The persona you are currently using should be in the first place in the list.
If you are using an old version of the scrollbars, or you are just plain not using the scrollbars here, you will have to add some code to delete the empty scrollbars that show on the bookmark toolbars. You have to use this code on a "*.ac.css" file (so you would need to have firefox patched with the method explained on the Multirow and other functions folder), since otherwise it won't work:
/* This deletes the scrollbar from bookmarks toolbar when using multirow bookmarks */
#PlacesToolbarItems scrollbar {display: none !important}
You only need to modify userChrome.css, deleting the lines that you don't want to apply (Every function has a comment above it saying what each ruleset does), or if you think you may want them later, just encase the feature parts that you don't want to apply between /* and */:
/* This is an example of a comment that wouldn't be read on a .css file */
I'm opening web files locally (as in opening html pages that you have created or downloaded) and the background is not the color it should be.
To change the directory browsing page and change how .css or some .txt files appear when opened with Firefox, I had to specify it to affect urls that start with "file:///", meaning that any file opened with Firefox will get overriden with those rules as well. To prevent this, go to userContent.css, and comment out the lines that affect this url (This rule should be exactly under the color variables at the start of the file).
While we only needed to use CSS to enable multi-row tabs, this breaks tabs draggability, making reordering tabs when it was enabled a bit erratic, so to fix this, I decided to put all multi-row tabs code inside the MultiRowTabLiteforFx.uc.js file. This means that now Multi-row tabs can be enabled following the method described inside the Multirow tabs folder. If you were using CSS code on your userchrome.css to enable multirow tabs, delete (or comment it out) for the js file to take effect.
Why use this method instead of using Stylus?
The main reason is that you can't style firefox about: pages nor dialog windows with just stylus.
The theme is made so that it changes most background colors, including the one of the popups that don't have any background color specified by their original creator. Sadly it doesn't change the text of these by default, so you may have to do it manually, or report the addon you want themed here, or just use the fix inside userchrome.css (at around lines 926-929) to turn the addons back to their white background color.
The original code for the custom scrollbars which we modified here belongs to Arty2, and you can find it here.
The original code for the multirow tabs (the CSS part) was written by Andreicristianpetcu, and you can find it here, or for just the code, here. The fix of multi-row tabs draggability was made by TroudhuK, and you can find the original one here.
The original code for the multirow bookmarks toolbar belongs to the original creator mentioned in this reddit thread, whose code was fixed by jscher2000 to use in our current firefox version.
The fix to be able to theme unread tabs again after FF61 (see bug 1453957 on bugzilla) as mentioned in this reddit thread, was made by moko1960 to use in Firefox 61+.
The code to be able to edit anonymous content (in our case the scrollbars and tooltips) was created thanks to the efforts of Zeniko, Nichu, and Sporif.
Special thanks to Messna for noting the class turning into an ID on FF58, and Snwflake for fixing Firefox root folder location on MacOS.
Also thanks to BelladonnavGF, Demir-delic, DallasBelt, Gitut2007, Hakerdefo, Tkhquang and YiannisNi for noting some issues with the theme, and the requests for new features that extended this project.
If you want to support this project, consider buying me a coffee to motivate me keep this repository up and running.
