This repository includes the files requires to fully dark theme firefox quantum to dark-gray colors (with #222-#444 colors mostly).
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).
What this "theme" will not affect will be your persona (aka the lightweight themes you install through firefox addons page), the text color used by it, and the accent color (line above active tab). To change those settings, you can change them manually through the about:config page, searching
lightweightThemes.usedThemes there, and changing the textcolor or accentcolor codes of your used persona respectively as seen on the image below:
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 issue with some parts of the VHD addon theme.
- checkboxes.uc.js: Fixed some issues with the VHD addon select boxes appearing as white even on dark OS's.
- Created an installation video, which you can check here.
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 scrollbars & tooltips method to be able to use external javascript to modify anonymous content, and then place the Sync-tabs-sidebar.uc.js file inside the Scrollbars & tooltips dark theme/Profile/ 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).
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 */
There is currently a problem with the multirow-tab code when you have more than 1 row of tabs visible that makes dragging tabs to other rows a bit erratic, so it will only drag the tabs to the previous row for some reason. I'll be trying to find a solution, but meanwhile... yeah, that's all there is.
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.
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 following folders of this repository:
- Theme colors: Following the method described in this folder you will ONLY color Firefox, coloring everything except tooltips and the scrollbar (those can be themed using the instructions on the Scrollbars & tooltips dark theme folder).
If you only want to use a dark theme but you aren't interested on using multirow tabs, or want to 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 28 inside userChrome.css).
- 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 82 inside usercontent.css to use it)
- Can set an image as background for the home page (You have to change the commented line that is described in line 170 inside userContent.css).
- Change the theme of either of Ublock Origin, Video Download Helper, Flash Video Downloader, Tab session manager, Undo closed tabs button, Download Manager (S3), Privacy badger, Noscript or S3 Translator extensions to a dark version. You have to update the UUIDs of the extensions inside "addons.css" for this.
- Theme features: In this one you will find a userchrome with ONLY the features part of the theme. These features are the following:
- Multiple row tabs.
- 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).
- Full theme (except scrollbars): 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 on the folder with that name if you want those themed too).
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.
To install the custom scrollbars to match the dark theme, you will have to use one of the 2 methods found on the "Scrollbars & tooltips dark theme" or "Scrollbars patchers(Old method)" folders inside this repository. You should be using the "Scrollbars & tooltips dark theme" folder method, since it's the most permanent, but if you find some bug or if the scrollbars lag for you, you could try using the old method one instead. The problem with the old method is that you will have 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.
The original code for the custom scrollbars belongs to Arty2, and you can find it here.
The original code for the multirow tabs was written by Andreicristianpetcu, and you can find it here, or for just the code, here. Also thanks to Messna for noting the class turning into an ID on FF58.
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.
Thanks to BelladonnavGF, Demir-delic, Hakerdefo 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.
Also thanks to Zeniko, Endor8, and RAZR_96 in this reddit comment for the userChrome.js way of editing anonymous content (in our case the scrollbars and tooltips).
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.