A dark theme would be really nice addition to the mobile version. I've installed the 'Dark background and Light text' add-on, but the blinding white of a new tab hurts my eyes when I'm using it at night.
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 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...
Last update: 28/05/2019
Files updated:
- Userchrome.xml: Updated them to the lastest released version.
Pre-Last update: 27/05/2019
- 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).
A note on people looking to replace some Tab Mix Plus features
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.
Installation
Main browser UI
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:
Short review of each folder:
- 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:home
and 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.
General sites dark theme
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.
Addon dark themes
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:
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.The scrollbars
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}
FAQ:
How do I submit an issue?
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).
I placed the files inside the chrome folder but I don't see any change
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 pre-loading screen of websites is still white, how can I change this?
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).
The synced tabs sidebar isn't themed.
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
.Some context menu commands dissapear after installing userchrome.
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:
...But this is commented out, so the command will show on the context menu:
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.The bookmarks multirow shows an empty scrollbar when enabled.
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:
I only want to use the multirow/(Any other) feature, but not the other ones!
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).
I placed userchrome.css inside my chrome folder and I still don't have multi-row tabs!
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 making the text of some addon popups unreadable, how do I fix this?
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.
Credits
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.
Donations
If you want to support this project, consider buying me a coffee to motivate me keep this repository up and running.
This question already has an answer here:
- How to fix invisible form fields in Firefox while using Adwaita Dark Theme (or any other dark theme) [duplicate] 1 answer
Since the update to Ubuntu 18.04 I use the dark theme 'Adwaita-dark' and have several input fields in Firefox there are not usable. The background and the color of the font is dark, similar colors. It would not be set a alternate theme, like the light theme of Adwaita that mentioned in this q/a. I search for an solution that leave the dark theme about all applications.
How is it possible to fix theme to use the input fields, see the strings to input the right content?
The screenshot below in Google Drive should illustrate the problem on the title field on left side, right from the 'doc' icon.
bueltge
bueltgebueltge
marked as duplicate by David Foerster, user68186, Zanna, Amith KK, Chai T. RexMay 19 '18 at 7:25
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1 Answer
I fix them for me with a custom stylesheet for Firefox. Leave a custom style with the name
userContent.css
in the directory ~/.mozilla/firefox/<custom-key>.default/chrome/
. You should also add the directory chrome
, important with lowercase. Use the css code below to fix them for different input fields. The result is like the image below.If you have trouble to find your folder for leave this stylesheet read this answer.
Copy the follow source to the custom stylesheet file
userContent.css
.If you face any problem on radio button or checkbox, after adding this CSS file, just remove -moz-appearance: none !important
bueltgebueltge