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

Warning: Screenshot does not include modifications made in this fork.

• Auto-hiding URL bar by reddit user SchokoMilf
• Favicon as a close button by MrOtherGuy
• Slight design changes
  • Set tab bar to be on top of navigation bar (default in Firefox)
  • Enabled title bar controls for windows by default
  • More subdued design when highlighting menu items
  • Rounded close button when hovering over favicon
  • Padding on left of tab bar
  • Probably other stuff I'm forgetting
• Hacky workarounds
  • Arbitrary border-radius to make something round in _favicon-close.css
  • Fixing weird padding in _tab-bar.css
  • Code that is probably getting overwritten

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

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.

For Windows (enabled by default):

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

For macOS:

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

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

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

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

Certain additions in this fork can be disabled through slight modifications in the files.

Comment out or delete the following line in userChrome.css:

@import '_navigation-bar-hide.css';

Comment out or delete the following line in userChrome.css:

@import '_favicon-close.css';

In _tab-bar.css change the 4th values to 0px for the following lines:

#TabsToolbar {
    padding: 0px 125px 0px 25px !important;
}

and

:root[sizemode="maximized"] #TabsToolbar {
    padding: 0px 0px 0px 25px !important;
}

This project is licensed under MIT license as described by the LICENSE file.
_favicon-close.css is also licensed under MPLv2 as described by the header.

There is a fair chance you'll come across bugs or mistakes as I don't know CSS, I haven't read the docs for custom CSS in Firefox, and I haven't read all of the original code. Because the bugs are likely my fault, please report them to me rather than upstream and I will try my best to fix them.

• Tab bar does not hide when in fullscreen

This is the unmodified version of the original developer's support message:

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