AskVG

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

- Last updated on by

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:

Advertisement

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.

Advertisement

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.

Also Check:

[Fix] userChrome.css and userContent.css Codes Stopped Working After Firefox Upgrade

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

Published in: Mozilla Firefox, Windows 10

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.

You are here: Home » Mozilla Firefox » [Tip] Get Colored Titlebar Back in Mozilla Firefox in Windows 10

Comments

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

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

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

  3. Hey AskVG, great article! Found it quite useful. However, know why whenever I maximize the window, Firefox maximize button looks a little… strange?

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

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

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

  10. 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;
    }

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

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

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

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

  16. Is there a way to add something to the css text file to make the inactive tabs background color a little bit with white background? same color as when you hover over them.

    Thanks!

  18. about:support

    This site can’t be reached

    The webpage at chrome://support/ might be temporarily down or it may have moved permanently to a new web address.
    ERR_INVALID_URL

  20. Hi blitz & VG
    if you don’t like to install Styles but are using Tab Mix Plus you can use Options > Display > Tab > Customize Styles…: Background Color: white & opacity: 30%
    Chris

  21. I’ve just tried this and it does change the titlebar colour 🙂

    However I’ve also reduced the title bar height and this has caused the minimise, maximise and close button images to be rendered as narrower than they should be.

    For the Close button the offset is not too bad, but for the Minimise button I usually end up getting a maximised window. When hovering over the titlebar, the titlebar shows a different shade where the ‘button’ will be active. Unfortunately the button image isn’t centred in this box.

    Can anyone give me hint as to what to change? Without the userChrome.css, the buttons render correctly but I don’t get a coloured titlebar.

  24. ^^ Just enable colored titlebar in Windows 10 Settings app and Firefox 57.0 will automatically start showing colorized titlebar.

  25. I have colored title bars enabled in Windows 10 , in Firefox i also had it show menu bar, bookmarks bar, and title bar. Only the title bar is colored, the rest like like the tabs they show grey and don’t match with the titlebar color. The userscript worked prior to 57, after I updated it wouldn’t launch until I deleted that userscript file.
    imgur.com/1l6YATd

  26. ^^ Firefox 57 comes with new Photon UI, that’s why some UI elements have been changed. Disable menubar and titlebar and you’ll get colored tab bar.

  27. Is there anyway to have it with the titlebar and menu bars enabled? I would strongly prefer it that way.

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.