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.
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 some other things, such as removing some context menu options, enabling multirow tabs, changing 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:
- addons.css: Fixed some missing elements and tabs on Ublock origin theme.
- Usercontent.css: Themed some missing title bar on dialog boxes.
- Userchrome.css: Updated the context menu commands that you can delete.
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 until TMP gets back on track on webextensions (since these fixes are a bit more annoying to toggle for people that don't know CSS), but as of right now, it 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.
Depending on if you only want to color dark your Firefox, or want to add some more functionability (like deleting some useless context menu commands, or adding multirow tab support), you will have to use the method described inside one of the 3 main folders of this repository (+ the scrollbars method if you want more customizable scrollbars, the tooltips themed, or multirow tabs):
- Theme colors: Only adds dark colors to firefox UI, including the scrollbars (basic color swap to dark&blue) or tooltips.
- Theme features: Enables removal of context menu items, multirow bookmarks, changing tab bar position (so that it could be under the bookmarks bar for example)
- Full theme (except tooltips): Does the same as the other 2 combined.
- Tooltips & Scrollbar customizations: Enables injection of JavaScript, letting you theme the tooltips, as well as letting you customize scrollbars further (such as making the thumb round, or adding gradient colors), as well as enabling multirow tabs.
- Theme colors: Following the method described in this folder you will ONLY color Firefox, including a simple re-color to scrollbars, but not theming tooltips (Tooltips can be themed using the instructions on the Tooltips & Scrollbar customizations folder).
If you only want to use a dark theme, and keep all the context menu options when right clicking on tabs/the web area (such as "Send image..." or "Send tab to device"), use this one. Apart from the basic Firefox UI theming, you can also theme a few other optional things (they require some editing of userchrome.css, or copying addons.css into the chrome folder):- Styling for unloaded and unread tab titles.
- Can change the tab line color to Windows current theme color (You have to change the commented line that is described in line 19 inside
userChrome.css). - Can change the background image of your lightweight theme to one of your choice on
userChrome.css(You have to be using a lightweight theme instead of the default dark theme of Firefox). - Can change the default text color of input boxes for those using a dark OS theme that affects the background of these (You have to change the commented line that is described on line 15 inside
usercontent.cssto use it) - Can set an image as background for the home page (You have to change the commented line that is described in line 19 inside
userContent.css).
- Change the theme of either of the following addons to a dark version (You have to update the UUIDs of the extensions inside "addons.css" for this):
- Ublock Origin
- Video Download Helper
- Flash Video Downloader
- Tab session manager
- Undo closed tabs button
- Download Manager (S3)
- Privacy badger
- Noscript
- Window resize
- S3 Translator
- Multi-accounts containers
- Temporary containers
- HTTPS Everywhere
- OneTab
- Notifier for Gmail (restartless)
- Popup Blocker Ultimate
- Theme features: In this one you will find a userchrome with ONLY the features part of the theme (with the exception of multiple row tabs, which can be only enabled using the
MultiRowTabLiteforFx.uc.jsfile inside the "Tooltips & Scrollbar customizations\chrome" folder). These features are the following:- Multiple row tabs (only through
MultiRowTabLiteforFx.uc.js). - Multiple row bookmarks toolbar (2 usable rows by default, but it is NOT enabled by default. You can add more rows editing userchrome).
- Hides some rarely used commands on the context menu such as "Set image as desktop background" (you can turn these on again).
- Changes the tab close button to always be visible.
- You can hide the sidebar completelly resizing it instead of having to click the sidebar button.
- Can change the URL bar font (You have to change the commented line on userchrome to use it).
- Can change the tabs position under the URL bar (You have to change the commented line on userchrome to use it).
- Multiple row tabs (only through
- Full theme (except Tooltips): This userchrome will have the effect of both the other folders combined (but you will still need to theme the Scrollbars and tooltips apart using the method described in that folder, as well as multi-row tabs).
You can turn the features you want on or off changing the commented lines on the CSS file (To change them you just have to open the userchrome.css 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 here.
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 "Tooltips & Scrollbar customizations" folder method, 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)).
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}
The old method folder shouldn't be used, since it requires you to re-patch the scrollbars with each firefox update, so I'm only keeping it in case the other new method stops working in the future.
They changed the selectors on the lastest firefox nightly builds, so you will have to delete a few lines in the MultiRowTabLiteforFx*.uc.js file you are using (it's detailed in CAPS what to delete) for the tabs bar to be right again. Once FF65 hits stable, the files here will be updated to those lines deleted by default.
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 "Tooltips & Scrollbar customizations" method to be able to use external javascript to modify it, and then place the Sync-tabs-sidebar.as.css file inside the Tooltips & Scrollbar customizations/Chrome/ folder inside this repository inside your chrome folder (The method is the same than for the scrollbars, except you place the sync related file on your chrome folder apart from the other files if you are going to use them as well).
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. A screenshot of this window can be seen in the first section of this readme.
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 Tooltips & Scrollbar customizations 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 broke 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 in the "Tooltips & Scrollbar customizations" folder (to be able to use external javascript files), and then placing the file MultiRowTabLiteforFx.uc.js inside your chrome folder. If you are updating from an old version of this theme, you should delete the lines about multi-row tabs from your old userchrome as well (that way you can enable multi-row by just placing or deleting the previously mentioned file).
Why use this method instead of using Stylus?
The main reason is that you can't style firefox about: pages nor the scrollbar 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 302-305) 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 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, Hakerdefo, Tkhquang and YiannisNi for noting some issues with the theme, and BelladonnavGF for the addition of the url font and and tabs below url bar suggestions.
If you have anything to ask or tell me about the theme that isn't a bug or an issue (such as a suggestion, or some clarification I may have missed on the documentation), you can contact me through reddit (You will need an account for that), directing the message to Izheil.