literature

Windows Custom Visual Styled Titlebars in Browsers

Deviation Actions

Nystrata's avatar
By
Published:
20.5K Views

Literature Text

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!

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

Image

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

Image

Section Links:


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)


(Outdated and No Longer Working) For Firefox

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

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

Image

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

Df449vl-2652cd74-840e-4d6c-8e62-7da29cc5fe99

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

Df449vl-2652cd74-840e-4d6c-8e62-7da29cc5fe99

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.

Df45ays-34752474-e7d8-41e0-b047-618cc3a1eaa9

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)

Image

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 )

Image

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

Image

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

Image

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.

Image

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

Image

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

Image

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!

There was an old, now-deleted journal post (Enabling your visual styled titlebar in Chrome) 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

Feel free to comment and reply with info that I may have missed here! 
© 2022 - 2024 Nystrata
Comments41
Join the community to add your comment. Already a deviant? Log In

are there any solutions for firefox?? T T