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

We told you yesterday about the release of Mozilla Firefox 40.0 version to Stable channel:

Mozilla Firefox New Version Updates

This new Firefox version comes with many improvements along with support for Microsoft's new operating system Windows 10. Mozilla has optimized Firefox user interface as well as functionality for Windows 10 OS as shown in following screenshot:

Mozilla_Firefox_Browser.png

But there is a slight UI issue which might irritate a few users. As we know Microsoft is forcing White titlebars in Windows 10 and the company didn't provide any direct option to disable White titlebars in program windows. That's why Mozilla has put its own image resources in Firefox web browser to draw the titlebar and caption buttons so that the browser looks good in Windows 10 and doesn't show ugly White titlebar color.

Its a wise move from Mozilla but the problem occurs if you use the trick to get rid of White titlebars in Windows 10:

[Tip] Get Rid of White Titlebars in Windows 10

If you use the built-in Aero Lite theme or our AskVG Colors theme or any other 3rd party theme to get colored titlebars in Windows 10, it destroys Mozilla Firefox look as shown in following screenshot:

White_Gray_Titlebar_Buttons_Mozilla_Firefox_Windows_10.png

As you can see Firefox doesn't look good if we use a different theme in Windows 10.

To solve this issue, we are sharing a very easy to use trick which will bring back the colored titlebars in Mozilla Firefox web browser in Windows 10 operating system.

We'll use a simple CSS trick to make the titlebar and buttons in Firefox transparent which will force Firefox to not use its own resources to draw the titlebar elements and it'll start using your current Windows theme's color and resources.

To apply the trick, we'll take benefit of the built-in userChrome.css file which needs to be created in Firefox Profile folder.

If you also want to enjoy colored titlebar in Firefox web browser under Windows 10, check out following simple steps:

1. First of all we'll create the userChrome.css file in "chrome" folder inside your Firefox user profile folder. If you are not aware of this file and your profile folder, check out following article:

All About Mozilla Firefox Profile Folder and Configuration Files

Just type about:support in Firefox addressbar and press Enter. It'll open Troubleshooting Information page as mentioned here. Now click on "Show Folder" button given next to "Profile Folder" label. It'll open Firefox profile folder directly. Now create a new folder Chrome inside it and then create a new fileĀ userChrome.css inside Chrome folder.

2. Once you create the userChrome.css file, open it in Notepad.

3. Now paste following piece of code in the file. If the file already exists and contains some text, paste the code at the end of the file:

#main-window[windowtype="navigator:browser"] {
background-color: transparent !important;
}
.titlebar-button {
background-color: transparent !important;
transition: background-color 0.2s ease;
}
.titlebar-button > .toolbarbutton-icon {
list-style-image: none;
}
.titlebar-button:hover {
background-color: rgba(0, 0, 0, 0.15) !important;
}
#titlebar-close:hover {
background-color: #E81123 !important;
}
#titlebar-close:hover > .toolbarbutton-icon {
list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-white") !important;
}

4. After pasting the code, save the file and open Mozilla Firefox. Now you'll see the colored titlebar and transparent buttons in Firefox window.

Colored_Titlebar_Buttons_Mozilla_Firefox_Windows_10.png

Thanks to our reader "Alex" for sharing the code...

PS: If you are not familiar in creating this file, we are sharing a ready-made userChrome.css file for your convenience. Download following ZIP file, extract it and you'll get the userChrome.css file:

Download Ready-made userChrome.css File

Now copy the CSS file to Chrome folder present inside your Firefox profile folder as mentioned in Step 1 and restart Firefox web browser to take effect.

NOTE: If you feel the titlebar buttons are a little bit dark in Firefox, you can enable Titlebar in Firefox using following tutorial:

How to Enable Titlebar Text and Icon and Put Tabs on Bottom in Mozilla Firefox?

It'll fix the issue and you'll get native titlebar buttons in Firefox similar to your current Windows theme.

Colored_Titlebar_Native_Buttons_Mozilla_Firefox_Windows_10.png

Also Check:

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





Share this article: Facebook | Twitter | Google+ | Reddit | Tell a friend

Posted in: Mozilla Firefox, Windows 10


Other similar articles that may interest you


Comments

  • Excellant article VG! I am sure a lot of people will benefit from it as I have done. The white square buttons were really ugly.

  • Neat tip, if only it would work.
    Followed your instructions to the letter, but the Firefox Titlebar is still grey with no option to change it.
    I was able to make changes in Windows 10, so that's fine.

  • Hey AskVG, great article! Found it quite useful. However, know why whenever I maximize the window, Firefox maximize button looks a little... strange? mk7wig.by3301.livefilestore.com/y3pdWxkqEb5CSW5dwtTeqbeLHmMBkZ8Y_2Li2U_LI-f3c8nB8YvJk5xz_-CryuIlSQHM4kGoyEbCbyS85wX0NM7j3t4L3-WO2SqfyIEUup0-KQqcH7aqbGohJoyUPsiRzafv86zxAV3_lrPxH1cAIPEVgMFW1_aOBZM2E8BBA64t6c/Firefox%20caption%20buttons%20Win10.PNG?psid=1

  • O.K. Got it working. From White to Grey.
    Now, just have to make the buttons more prominent.

  • Thanks VG, it's working fine for me. I really hate such forced UI changes.

  • I use the ADD-ONS Themes in the following website to colour the Title Bar in Firefox in Windows 10. addons.mozilla.org/en-US/firefox/themes

  • Thanks a lot for this, VG. Here's another small CSS snippet for userChrome.css to get more OS like title bar buttons without re-enabling the title bar: pastebin.com/fikSpupW

  • yup, seems that there's a bug with maximize button. it's kinda blurry

  • VG

    The code has been updated to fix bold caption button problem. :)

  • If you're using Firefox Developer edition (or the built in Dark theme) this will black out your titlebar buttons. Here's the modified code for that:

    #main-window, .titlebar-button {
    background-color: transparent !important;
    transition: background-color 0.2s ease;
    }

    .titlebar-button:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
    }
    #titlebar-close:hover {
    background-color: #E81123 !important;
    }
    #titlebar-close:hover > .toolbarbutton-icon {
    list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-white") !important;
    }

  • Great. It really works

  • Hey, i needed white captions buttons. I use dark theme and can't see captions buttons, please help!

  • Hey VG and readers.

    The current CSS snippet makes all child windows of Firefox (page info, image info, ...) kind of unusable, as a large portion of those is simply entirely transparent. To fix this, here's a new CSS snippet: pastebin.com/Vr5JE9Nb

    Relocated the #main-window rule, since it doesn't need the transition stuff, and made it more specific, so it only works on the actual main window, and not all the child windows as well.

  • VG

    ^^ Good catch. Thanks. I have updated the code. :)

  • Great.. works like a charm!

  • Thanks al lot for this! Only problem with this when you use black, like I do, the text on the unused tabs is dificult to see. The + on the new tab button you can't see at all. I choose a less darker black, the black on the left of the darker black. Now it's easier on the eye's.

  • Thank you, great trick :)

  • Hi, done a lot of googling but to no success but anyway do you think this will work in Thunderbird too?

  • VG

    ^^ Yes. It should work.

Leave a Comment

(required)