Skip to main content

How to re-enable the Dark Developer Theme in Firefox 40 and newer

When Mozilla relaunched the Aurora channel as the Developer channel in 2014, it included a dark theme with it to distinguish that version from others.

The dark theme was designed specifically for the Developer edition of the browser but users could enable it in other versions of Firefox as well.

This changed with the release of Firefox 40 as options to enable the developer theme in the browser were removed from it.

All you had to do previously was to set a preference on Firefox's about:config page to true, and enable the dark theme afterwards in the Developer Tool settings.

The theme's appearance depends on the operating system and version that you are running. If you run Windows 10, it looks like the following when enabled:

firefox dev edition black theme

A workaround for non-Developer edition versions of Firefox was published soon thereafter on Bugzilla@Mozilla, but it enables the theme only for the active session and not permanently.

firefox 40 developer edition theme

To enable the dark theme for the session, do the following:

  1. Tap on the F12 key to open the Developer Tools.
  2. Select the settings icon in the top right corner of the screen.
  3. Locate and check "Enable browser chrome and add-on debugging toolboxes".
  4. Alternatively, set devtools.chrome.enabled to true on about:config.
  5. Open the browser console with Ctrl-Shift-J or by tapping on Alt, and selecting it under Tools > Web Developer.
  6. Paste the following code into it and hit enter:
    LightweightThemeManager.addBuiltInTheme({
              id: "[email protected]",
              name: "Developer Edition",
              headerURL: "resource:///chrome/browser/content/browser/defaultthemes/devedition.header.png",
              iconURL: "resource:///chrome/browser/content/browser/defaultthemes/devedition.icon.png",
              author: "Mozilla"
            });
  7. Open about:addons and switch to Appearance.
  8. Click enable next to Developer Edition.

Permanent Solution

stylish dark theme

There is a permanent solution that enables the dark theme across sessions. You do need the Firefox add-on Stylish for it which you can download from Mozilla AMO.

Once you have installed Stylish in Firefox and restarted it, click on the Stylish icon and select Write New Style > Blank Style.

Copy and paste the CSS style information from Pastebin into the Stylish form, give the new style a new and click save afterwards.

Repeat the process for this second style which you also find listed on Pastebin.

Once you have done all that, Firefox should display the dark developer theme all the time.

We have uploaded both files as a packed archive to our own server for safe keeping. Download the archive containing both style sheets with a click on the following link: firefox-dark-theme.zip (291 downloads)

Now You: Do you prefer the light or dark Firefox theme?

This article was first seen on ComTek's "TekBits" Technology News

HOME