[Dark Theme] Make Mozilla Firefox Look-Like Microsoft Edge Web Browser

We know that Microsoft’s latest OS Windows 10 comes with a new web browser which is called “Microsoft Edge” (previously known as Project Spartan). Microsoft Edge browser is actually a modern (metro) app which has been developed to provide better compatibility, better performance and better support for modern web standards.

Apart from many new and advanced features, Microsoft Edge browser also comes with an awesome dark theme which can be enabled using its settings page. The browser looks very stylish in the dark theme as shown in following screenshot:

Windows_10_Microsoft_Edge_Dark_Theme_Mode.png

Advertisement

If you like the dark theme of Edge browser and want to enjoy similar UI in Mozilla Firefox web browser, this topic will definitely please you

Today in this article, we are going to share a small piece of CSS code which will make your Firefox web browser look-like Microsoft Edge web browser. With the help of this CSS code, you’ll be able to transform Firefox into Edge web browser.

Following screenshot shows Mozilla Firefox with Edge dark theme in action:

Microsoft_Edge_Dark_Theme_Mozilla_Firefox.png

If you are ready to bring Microsoft Edge browser’s UI to Mozilla Firefox, check out following simple steps:

NOTE: The CSS code will work fine in Firefox Stable, Beta, Nightly and Developer editions.

STEP 1:

Advertisement

First of all download the required CSS code from following link. Big thanks to Wellkins at Deviantart for sharing the code:

Download Microsoft Edge’s Dark Theme for Mozilla Firefox

You’ll find the download button at the top in right sidebar at above mentioned link.

After downloading the RAR file, extract it with 7-Zip or WinRAR and you’ll get the required CSS code in a TXT file present in “Main Theme” folder.

STEP 2:

Now you need to apply the CSS code in Mozilla Firefox. You can apply the CSS code using any of following 2 methods:

METHOD 1:

You can apply the CSS code easily using Stylish extension. Just install Stylish extension, copy CSS code from TXT file present in “Main Theme” folder and paste the code using “Write new style -> Blank style” option from Stylish menu.

You can download and learn more about Stylish from following topic:

How to Install and Use Stylish Extension to Customize Mozilla Firefox UI

METHOD 2:

You can also apply the CSS code without installing any extension. Just copy CSS code from TXT file present in “Main Theme” folder and paste the code in “userChrome.css” file in your Firefox profile folder.

To know more about userChrome.css file and its location, check out Steps 1 and 2 in following tutorial:

[Tip] Get Colored Titlebar Back in Mozilla Firefox in Windows 10

STEP 3:

Once you apply the CSS code, you’ll immediately get the awesome dark theme of Microsoft Edge web browser in Mozilla Firefox.

If you want to move the Home, Stop and Reload buttons before the address bar in Firefox similar to Microsoft Edge browser, you can install Buttons Back extension:

Download Buttons Back Extension for Mozilla Firefox

And if you want to combine addressbar and search bar in Firefox similar to Microsoft Edge browser, you can try Omnibar extension:

Omnibar: Combine Mozilla Firefox Address bar and Search bar

Also Check:

[Tip] Enable Hidden Secret Dark and Light Themes in Mozilla Firefox

Published in: Mozilla Firefox, Themes and Wallpapers

About the author: Vishal Gupta (also known as VG) has been awarded with Microsoft MVP (Most Valuable Professional) award. He holds Masters degree in Computer Applications (MCA). He has written several tech articles for popular newspapers and magazines and has also appeared in tech shows on various TV channels.

Comments

NOTE: Older comments have been removed to reduce database overhead.

  1. [b]Simple White[/b] is another one theme avail at mozilla extension store and its pretty close to edge’s default look n feel !

  2. Tried on stylish…
    Bug at line 1416… parsing Value !
    I think….It looks like its not optimized for all screen sizes…..cos its too big for standard screens !

  3. Also check Rebrand
    addons.mozilla.org/firefox/addon/rebrand/
    This wizard creates an XPI that rebrands Firefox. You can change the brand name as well as the brand images and icons.

  4. As Mr.P2d said, error on line 1416: “error in parsing value for ‘min-height’. declaration dropped”. Looks fantastic though, but the only problem is, if you click the top edge of the screen, above a tab, you cannot switch to that tab. There seems to be a 1-2 pixel wide line running across the top of the screen, on which you cannot click. Affects usability for me, since it severely impairs me from switch tabs quickly. However the UI looks fantastic, and mimics Edge pretty accurately.
    An interesting point to note here is that the actual Edge browser allows you to move the cursor to the topmost edge of the screen and click above a tab to switch to it. So this is most likely a bug in the style, and not implemented deliberately.

  5. Edge is a horrible browser that is lacking in features. Yes it has a good engine but it has a highly bizarre useragent.

  6. Hi everyone,

    First of all, I’d like to say thanks to AskVG, and more specifically the user Vishal-Gupta from DeviantART, for creating this article about my theme.

    I also want to say that the theme as been improved in many ways since the first release, and there’s now a specific version of the theme for each Firefox channels. It also include support for english and french languages to avoid more display bugs. You should try it if you’re still on the previous version.

    Remember that it’s not a finished product. You are invited to give your feedback on the DeviantART page dedicated to the theme (wellkins.deviantart.com/art/MOZILLA-EDGE-for-Firefox-563067693). If more people report me the bugs they found, the theme will only be better!

  7. Check out this new theme!
    Black Edge Theme for Firefox
    addons.mozilla.org/es/firefox/addon/black-edge-theme-for-firefox/

  8. i have try this..so cool..!
    but there is a light version?
    dark is elegant but light is good

  9. @VG

    So I used the theme in stylish and everything looks great. However, there seems to be some formatting issue when using Disqus threads. With the Edge theme turned on in stylish I cannot see the upvote counter, when I turn it off I cannot. This may be because the top bar (address, bottons etc) take up more vertical space than FF original theme thus pushing some elements on a web page out of view.

    Any fix for this?

  10. ^ *When I turn the theme off I can see the upvote counter in disqus comments.

Leave a Comment

Your email address will not be published. Required fields are marked *

NOTE: Your comment may not appear immediately. It'll become visible once we approve it.