eduardhojbota / moonlight-userchrome

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

Moonlight 🌌 userChrome

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

Installation

1. 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
2. Create a new folder named chrome
3. • 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
4. 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
5. 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 :)

moonlight-userchrome's Issues

Title-bar overlay

When re-enabling the title-bar overlay, the close-min-max is ontop of the tab-view and tabs.

Firefox 122.0 on Sonoma 14.3.

Container tab icons always rendered in blue

As you can see in the screenshot, the container name and the underline in the tab are shown with proper colors, but the icon is rendered in blue. It would make more sense if the icon was also yellow like the name and the underline.

Extra space on the right side of menu with vanilla bars order + titlebar controls

Also tabs are over title bar controls

May I have the background in the preview image?

May I have the background that you use in the preview image?

https://raw.githubusercontent.com/eduardhojbota/moonlight-userChrome/master/preview.jpg

Thank you.

Context menu

Hi,

since Firefox 91 context menu of web pages are really hard to read.
IMHO it's necessary a color correction of the text label

Thanks

Tab close icon disappears on hover

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Search github for a similar feature or PR before submitting
[ ] support request => Please do not submit support request here, instead contact the https://www.reddit.com/r/FirefoxCSS/ community

Current behavior
When hovering on the close button of a tab, the X icon disappears.

Expected behavior
When hovering on the close button of a tab, the X icon should be visible.

Minimal reproduction of the problem with instructions
Open a tab, hover over the X icon of the tab.

Please tell us about your environment:

• Moonlight version: 1.0.0
• Operating system: Windows
• Firefox version: Firefox 88.0

Devtools styling?

Would you be interested in adding theming of the devtools? I have started work on a pr for it but I wanted to check in before I put in the work to finalize things. Here is a sample of what it will look like

Before:

After: