How to make custom theme where we can modify close, max, min icons and also the tab sizes etc?

Add-ons addons.mozilla.org
,
#1

I want fully customisation but can’t find any docs related to that, to change the UI not just colors.

#2

Creating a fully customized theme for Firefox, particularly modifying elements like close, max, min icons, tab sizes, and other UI components, can be achieved through the use of the userChrome.css file. This file allows you to write custom CSS rules that modify Firefox’s user interface to your liking.

Here’s how you can do it:

  1. Understanding userChrome.css:

    • The userChrome.css file is a way to customize Firefox’s interface with your own CSS code. see here.
    • It has gained more importance with Firefox Quantum, as many tweaks that could be previously done with add-ons now require modifications in userChrome.css.
    • For example, to change the size of the ‘close tab’ button, you can use CSS rules like the following:
      .tab-close-button * {
  width: 32px !important;
  height: 32px !important;
}
      This code will double the size of the close button on tabs. see

  2. Creating Your userChrome.css File:

    • The userChrome.css file does not exist by default. You need to create it in the appropriate location inside your Firefox profile folder.
    • Since Firefox 69, you must enable these customizations in about:config by setting “toolkit.legacyUserProfileCustomizations.stylesheets” to “true”.

  3. Editing the userChrome.css File:

    • You can use any text editor to edit this file. Notepad in Windows or any other text editor will work fine.
    • Add your custom CSS rules to this file. Ensure that each tweak is on its own line for clarity.
    • Save your changes and restart Firefox for them to take effect.

  4. Finding Resources and Examples:

    • If you’re looking for specific tweaks or examples, there are many resources available online where you can find ready-to-paste style recipes and communities for help.
    • Websites like userChrome.org offer guides and examples of what userChrome.css can do and how to create it.
    • They also provide resources for style recipes and tools which can be very helpful.

Remember, customizing the Firefox UI using userChrome.css requires knowledge of CSS and an understanding of Firefox’s UI structure. You might need to experiment a bit to get the exact look you want. Also, be aware that extensive customizations might impact the browser’s performance or future compatibility, so proceed with caution and always keep backups of your original settings.