Dracula Icon


Dracula Theme for Firefox
firefox - Theme Preview


Install using Firefox Addon

Install the theme directly from Firefox Addons.

Install using userChrome

Edge-Frfox fork CSS Theme that aims to recreate the look and feel of the Chromium version of Microsoft Edge.

  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 userChrome/chrome folder into the profile folder.git clone https://github.com/dracula/firefox.git

  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: 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

JSON Viewer
  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

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).