Firefox Dracula

This Firefox userChrome.css and userContent.css theme is a fork of Edge-Frfox that aims to recreate the look and feel of the Chromium version of Microsoft Edge in the style of Dracula.

Extra Features • Installation • JSON Viewer • Tweaks • License

💫 Extra Features

• Custom DevTools
• Custom JSON Viewer

⚙️ Installation

1. Go to about:support and click the "Open Folder/Show in Finder" button for the root directory of your browser profile/s.

2. Download and copy the chrome folder into the profile folder.

3. Go to about:config and change these preferences:

   For all operating systems:

   1. toolkit.legacyUserProfileCustomizations.stylesheets = true
   2. svg.context-properties.content.enabled = true
   3. layout.css.color-mix.enabled = true

   On macOS:

   1. To use the Edge style context menu on macOS then set widget.macos.native-context-menus = false

   Recommended:

   1. browser.tabs.tabMinWidth = 66
   2. browser.tabs.tabClipWidth = 86
   3. browser.tabs.tabmanager.enabled = false

📜 JSON Viewer

Preview	Settings

Installation

1. Go to about:config page and set devtools.jsonview.enabled = false.

2. Install the JSON Lite extension from here.

3. Set the values as shown in the screenshot above, you can find the values to copy below.

   Font: 13px JetBrains Mono,monospace
   Text color: #f8f8f2
   Background color: #282A36
   Info color: #6272a4
   Info hover color: #6272a4
   Line numbers color: #6272a4
   Line numbers background: #1D2128
   String color: #f1fa8c
   Number color: #bd93f9
   Boolean color: #bd93f9
   Null color: #bd93f9
   Propertie name color: #8be9fd
   Error color: #ed2655

🎨 Tweaks

Certain customizations like hiding the Firefox logo on the newtab page or switching to floating tabs can be done on the theme. More information on how to do this can be found in the original repository.

You can also check out Stylus themes (e.g. StackOverflow or GitHub).

📝 License

MIT