Install the theme directly from Firefox Addons.
Edge-Frfox fork CSS Theme that aims to recreate the look and feel of the Chromium version of Microsoft Edge.
-
Go to
about:support
and click the "Open Folder/Show in Finder" button for the root directory of your browser profile/s. -
Download and copy the
userChrome/chrome
folder into the profile folder.git clone https://github.com/dracula/firefox.git -
Go to
about:config
and change these preferences:For all operating systems:
toolkit.legacyUserProfileCustomizations.stylesheets
=true
svg.context-properties.content.enabled
=true
layout.css.color-mix.enabled
=true
On macOS: 4. To use the Edge style context menu on macOS then set
widget.macos.native-context-menus
=false
Recommended: 5.
browser.tabs.tabMinWidth
=66
6.browser.tabs.tabClipWidth
=86
7.browser.tabs.tabmanager.enabled
=false
- Go to
about:config
page and setdevtools.jsonview.enabled
=false
. - Install the JSON Lite extension from here.
- 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
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).