Applying custom Windows styles to Firefox, Chrome, and other Chromium browser’s window buttons in Windows 10 & 11

Typically, browser vendors force default button styles onto the program. This can be troublesome when you use something like SecureUxTheme to change your Windows styles, and you care about the cohesiveness. There is a hacky solution, even if the Firefox forums told me there wasn’t. 😉

DEFAULT: Custom themed Notepad next to standard browsers

For Google Chrome, Edge, Brave, and some other Chromium-based browsers

For Chromium based browsers you can simply change the shortcut target to allow launching with your custom changes.

  1. Open start menu.
  2. Search and find your browser shortcut
  3. Right-click, and open file location
  4. Right click > open Properties of the browser shortcut (The shortcut for Chrome in the Start Menu may be found in C:\ProgramData\Microsoft\Windows\Start Menu\Programs)
  5. Add this line --disable-windows10-custom-titlebar to the end of the Target field after a space. (For Chrome, “C:\Program Files\Google\Chrome\Application\chrome.exe” becomes “C:\Program Files\Google\Chrome\Application\chrome.exe” –disable-windows10-custom-titlebar )
  6. In order for your changes to show up you may need to use Task Manager (ctrl + shift + esc) and kill all background processes of that browser
  7. Repeat for each browser shortcut you use.

Changing the Registry Launch settings

This is all well and good but what if you click on a link and the browser opens automatically? Now we aren’t using the custom launch option anymore. We can edit the registry to fix this.

This is the “I’m not responsible if you break your computer” warning: BE SURE TO ALWAYS MAKE A BACKUP OF THE REGISTRY BEFORE PERFORMING ANY CHANGES.

  1. Launch the Registry Editor (Win + R, regedit)
  2. Navigate to Computer\HKEY_CLASSES_ROOT\ChromeHTML\shell\open\command
  3. 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
    • We are essentially just adding that custom launch argument onto the default launch arguments Windows calls when it opens the program
  4. Starting the browser now use your themed settings. Older versions Chromium may have a different startup option. Try --disable-features=Windows10CustomTitlebar if it doesn’t work for you

Firefox

Firefox needs CSS and changing an internal flag in order to work.

  1. Open your Firefox profile. You can find it in %appdata%\Mozilla\Firefox\Profiles, try looking at the one most recently modified.
  2. If the folder doesn’t exist already, create a folder called ‘chrome‘. Yes, this is the tutorial for Firefox.
  3. Inside the ‘chrome‘ folder in your profile, create or edit the file ‘userChrome.css‘.
  4. Put these contents (or embedded down below) into the css file, either on its own or adding to what is already there. You can modify anything you want, such as the ‘titlebar-button:hover’ alpha value to your liking.
  5. Open a new Firefox window
  6. Enter about:config into the URL bar, and bypass the warning
  7. Change the toolkit. legacyUserProfileCustomizations. stylesheets option to true by double clicking.
  8. Restart Firefox
@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.5s ease;
height: 0px;
}
.titlebar-button>.toolbarbutton-icon {
list-style-image: none;
}
.titlebar-button:hover {
background-color: rgba(121, 121, 121, 0.1) !important;
}
#titlebar-close:hover {
background-color: rgba(121, 121, 121, 0.1) !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-glass !important;
background: transparent !important;
}
#navigator-toolbox {
background: transparent !important
}
view raw userChrome.css hosted with ❤ by GitHub

And finally, get my better dark theme for Firefox. 🙂


Now your browser buttons look sleek and uniform, just like the rest of your system.


It helps me if you share this post with anyone who might be interested.
Quick Links to My Stuff

Published 2022-07-31 09:03:00

Leave a Reply

Your email will never be shared or used.