Skip to content

A comprehensive dark theme for Firefox

License

Notifications You must be signed in to change notification settings

heartfield/ff-midnight

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

52 Commits
 
 
 
 
 
 
 
 

Repository files navigation

🌚 FF Midnight - A Dark Theme for Firefox

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.

🎨 Theme color options

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.

⚙️ Installation

  1. As a prerequisite you should use the Firefox dark theme. It can be selected on the about:addons#themes page.
  2. Firefox does not load userChrome.css or userContent.css automatically anymore. To enable this go to the about:config page, search for toolkit.legacyUserProfileCustomizations.stylesheets and set the option to True.
  3. Find your Profile folder (Profile folder names are different for everyone):
    Go to the URL about:support > Profile Folder > Show in Finder (MacOS) or Open folder (Windows).
    Alternatively go to about:profiles > Root Directory > Show in Finder (MacOS) or Open Folder (Windows).
  4. Copy the contents of this repository's theme folder to the chrome folder in your Profile folder. Create the chrome folder in your Profile folder if there is none yet.
  5. Optional: To change the default Galaxy color scheme to Cosmos or Redshift open userChrome.css and userContent.css and follow the instructions in there.
  6. 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 to about:debugging#addons and find and copy the UUID of these addons. Open the CSS files for these addons located in theme\css\ff-midnight\extensions and paste the UUID in the correct location (Instructions found in the css file).
  7. Optional: Add a custom background image for the About:Home and About:Newtab pages: Open background-image.css and follow the instructions in there.
  8. Restart the browser.

🌌 Preview

FF Midnight screenshot

Preferences page, Sidebar, Custom background for About:Newtab, Custom Tab indicators, uBlock Origin and Multi-Account Containers panels

FF Midnight screenshot

View Source page, About:Addons page, Page Info dialog window

FF Midnight Cosmos palette FF Midnight Galaxy palette FF Midnight Redshift palette

👯‍♀️ Contributions

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.