Moonlight 🌌 userChrome

A dark userstyle for Firefox inspired by moonlight-vscode-theme and github-moonlight

Installation

Open your currently active profile folder
1. In the URL bar type: about:profiles
2. Look for the profile which has the "Default Profile" property set to true
3. Click on "Open Folder" button belonging to the "Root Directory" property
Create a new folder named chrome
- Clone the theme directly into the chrome folder. If you choose this method you will be able to update the theme by pulling the latest files.
  OR
- Download and extract the files in the chrome folder
If you're running Firefox 69+
1. In the URL bar type: about:config
2. You will receive a warning to proceed with caution. Accept the Risk and Continue.
3. In the "Search preference name" input field type toolkit.legacyUserProfileCustomizations.stylesheets
4. Set it to true by double clicking the false value
Restart the browser

Custom styling

The theme comes as is but it can be extended using CSS files provided in the custom folder. Further extensions should be included in the same folder to keep the main theme consistent. To enable custom styles, copy and paste the following @import statements at the end of the userChrome.css file.

Re-enable title bar controls (MIN-MAX-CLOSE buttons)

For Windows:

@import "custom/_titlebar-controls-enable-windows.css";

For macOS:

@import "custom/_titlebar-controls-enable-macos.css";

Disable megabar behavior

@import "custom/_megabar-disable.css";

Add Developer Tools styling

Set theme to dark in Firefox Developer Tools settings. Then, add the following line to userContent.css:

@import "custom/_dev-tools.css";

Support

If you love my work and would like to support my future endeavors I would gladly drink a coffee with you :)