Windows Custom Visual Styled Titlebars in Browsers

It seems that all of these methods are outdated and no longer work, unfortunately.
If you have up-to-date working methods, please share in the comments!

Firefox removed the -moz-win-glass feature required for the method:
https://bugzilla.mozilla.org/show_bug.cgi?id=1850979

Some users report using Firefox ESR 115 still works, but the feature will likely be removed in a future update.

Chrome and a lot of Chromium-based browsers also removed --disable-features=Windows10CustomTitlebar and --disable-windows10-custom-titlebar features required for the method.

So, there's not really a working method for these browsers at the moment.

***

There was an old, now-deleted journal guide that detailed how to allow custom Windows themed titlebars in Chrome that I'll redetail here.

I'll also talk about the method for Firefox here too:

By default on Windows 10 and Windows 11, some web browsers will draw their own window border and titlebar, which won't match the look of custom Windows themes

But we can change them to make them use the native titlebar to match!

Section Links:

• For Firefox ESR 115 (Not for normal Firefox Release)

• (Outdated and No Longer Working) For Brave, Google Chrome, Edge and some other Chromium-based browsers

For more about using custom themes on Windows, see niivu's guide to Installing Windows Themes.

(The custom Windows theme used in these screenshots is BIB3 for Windows by @niivu)

For Firefox ESR 115 (Not for normal Firefox Release)

Update It appears may be be broken on regular Firefox current update. (117)

Some users report using Firefox ESR 115 still works, but the feature will likely be removed in a future update.

Customizing the Firefox UI with CSS

Follow these instructions to enable custom browser CSS to create the needed userChrome.css file for Firefox: https://www.reddit.com/r/firefox/wiki/userchrome/

In your userChrome.css file, add the relevant CSS, save the file, and then restart Firefox. I've found that the following works for me:

userChrome.css

@@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

@@namespace html url("http://www.w3.org/1999/xhtml");

.titlebar-button {

background-color: transparent !important;

transition: background-color 0.2s ease;

height: 25px;

}

.titlebar-button > .toolbarbutton-icon {

list-style-image: none;

}

.titlebar-button:hover {

background-color: rgba(128, 128, 128, 0.3) !important;

}

#titlebar-close:hover {

background-color: rgba(128, 128, 128, 0.3) !important;

}

#titlebar-close:hover > .toolbarbutton-icon {

list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-white") !important;

}

#main-window{

  -moz-appearance: -moz-win-borderless-glass !important;

  background: transparent !important;

}

#navigator-toolbox{ background: transparent !important }

(The CSS was taken and edited from bigmuscle's reply on the MSFN forums.)

Restart Firefox, and now Firefox will use your native styled titlebar:

(Optional) Recoloring browser elements

Now your browser will use your custom Windows titlebar instead of its own.
If everything works, you can skip this section!

Browser elements like the tab and toolbar will still use the Firefox theme, so by default, Dark Mode will have hints of purple in it, which you may want to change.

If you'd like to change the default colors, you can grab a custom theme from Firefox Addons to recolor some of the browser elements, and your titlebar will still keep Window's visual style.

Works in Firefox 100!

Extra notes for Firefox

The hover and click effect for the caption buttons are still rendered by Firefox instead of Windows. In this case, the CSS adds a slight transparent highlight when hovering over the caption buttons, which is a decent compromise. Play around with the CSS to your liking!

Special thanks to @@Ingan121 for suggesting updating-moz-win-glass to -moz-win-borderless-glass for newer versions for Firefox

(Outdated and No Longer Working) For Brave, Google Chrome, Edge and some other Chromium-based browsers

Changing the Browser Shortcuts

Update It's reported that any browser with Chromium version 115 or later will not work with this method. Please let me know if there's a work around!

Let me know in the comments if anyone knows of a work around!

From @niivu's comment, using MicaForEveryone is a possible alternative to this method. This may also work with Edge and Chrome, though I have not tested this myself.

***

Find your browser shortcuts, right-click, and open Properties
(The shortcut for Chrome in the Start Menu may be found in C:\ProgramData\Microsoft\Windows\Start Menu\Programs)

In the following Properties window switch over to the Shortcut tab, and add

--disable-windows10-custom-titlebar

to the end of the Target field
(For Chrome, "C:\Program Files\Google\Chrome\Application\chrome.exe" becomes
"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-windows10-custom-titlebar )

You may need to repeat for each browser shortcut you use.

Your browser should now use your custom Windows titlebar when you launch from these shortcuts!

(Optional) Changing the Registry Launch settings

Changing the shortcut properties launches Chrome with the custom-titlebar option, but that doesn't affect when the browser is launched by the system or other apps, such as opening a link on Discord.

We can edit the Registry for the custom-titlebar option to work in those cases too.

(These steps are for Google Chrome. I'm unsure if this works for other Chromium browsers.)

BE SURE TO MAKE A BACKUP OF THE REGISTRY BEFORE PERFORMING THESE STEPS.
Misconfiguring the Registry may cause your computer to malfunction and be inoperable!

Launch the Registry Editor

Navigate to Computer\HKEY_CLASSES_ROOT\ChromeHTML\shell\open\command

Change the (Default) value from
"C:\Program Files\Google\Chrome\Application\chrome.exe" --single-argument %1

to

"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-windows10-custom-titlebar --single-argument %1

(Replace the location with your own if your Chrome installation is in a different location.)

Starting the browser now should use the themed Windows titlebar and caption buttons!

Some older versions of Chrome/Chromium have a different startup option. For those, instead of
--disable-windows10-custom-titlebar
try
--disable-features=Windows10CustomTitlebar

(Optional) Recoloring browser elements

Now your browser will use your custom Windows titlebar instead of its own.
If everything works, you can skip this section!

However, depending on your custom theme and colors, your toolbar and tabs may be discolored.
You can set customized browser colors to fix this.

Open a new tab to the New Tab page, and the click Customize Chrome in the bottom right.

Then go to Color and theme, and choose a color that fits!

You can also grab a theme from the Chrome Web Store.

Works in Google Chrome 101!

Extra notes for Chrome

The customized browser colors/Chrome Web Store themes do not apply to Incognito windows.

For pages that are set to Open as window, the titlebar will be missing some of the controls, such as the back and refresh buttons.

Feel free to comment and reply with info that I may have missed here!