FF Midnight is a comprehensive dark theme system for Mozilla Firefox. It features interface styling that goes beyond the default built-in dark theme of the browser.
FF Midnight styles the complete interface in a dark color scheme, including Sidebars, Preference pages, View source page, PDF Viewer, all Firefox About:Pages and it also features a dark theme for popular addons such as uBlock Origin and Multi-Account Containers.
FF Midnight has 3 different dark color schemes that you can choose from:
- Galaxy - A dark gray theme (default)
- Cosmos - A dark blue theme
- Redshift - A dark brown theme
Adding your own color scheme is easy. Use one of the existing color scheme files as a starting point and change the colors.
- As a prerequisite you should use the Firefox dark theme. It can be selected on the
about:addons#themes
page. - Firefox does not load userChrome.css or userContent.css automatically anymore. To enable this go to the
about:config
page, search fortoolkit.legacyUserProfileCustomizations.stylesheets
and set the option toTrue
. - Find your Profile folder (Profile folder names are different for everyone):
Go to the URLabout:support
> Profile Folder > Show in Finder (MacOS) or Open folder (Windows).
Alternatively go toabout:profiles
> Root Directory > Show in Finder (MacOS) or Open Folder (Windows). - Copy the contents of this repository's
theme
folder to thechrome
folder in your Profile folder. Create thechrome
folder in your Profile folder if there is none yet. - Optional: To change the default Galaxy color scheme to Cosmos or Redshift open
userChrome.css
anduserContent.css
and follow the instructions in there. - Optional: If you have the uBlock Origin and/or Multi-Account Containers extensions installed you can add theme styling to their interfaces as well.
Go toabout:debugging#addons
and find and copy the UUID of these addons. Open the CSS files for these addons located intheme\css\ff-midnight\extensions
and paste the UUID in the correct location (Instructions found in the css file). - Optional: Add a custom background image for the About:Home and About:Newtab pages: Open
background-image.css
and follow the instructions in there. - Restart the browser.
Preferences page, Sidebar, Custom background for About:Newtab, Custom Tab indicators, uBlock Origin and Multi-Account Containers panels
View Source page, About:Addons page, Page Info dialog window
This theme is tested on MacOS but it should work fine on Windows and Linux. If you find any bugs or have suggestions; all feedback is welcome.