Adaptive-Tab-Bar-Colour

Adaptive Tab Bar Colour

Changes the colour of Firefox theme to match the website’s appearance.

What Does the Add-on Do?

This add-on dynamically adjusts the Firefox theme to match the appearance of the website you are viewing, similar to the tab bar tinting feature in Safari on macOS.

Works Well With

• Dark Reader
• Stylus
• Dark Mode Website Switcher

Incompatible With

• Adaptive Theme Creator
• Chameleon Dynamic Theme
• VivaldiFox
• Envify
• Any other add-on that modifies the Firefox theme

Removing the Shadow at the Bottom of the Toolbar

To remove the thin shadow cast by web content onto the browser toolbar, navigate to Settings (about:preferences) and disable “Show sidebar” in the “Browser Layout” section. Alternatively, add the following code to your CSS theme:

#tabbrowser-tabbox, .browserContainer {
	box-shadow: none !important;
}

How to apply custom CSS

1. Type about:config in the address bar and press Enter.
2. Search for toolkit.legacyUserProfileCustomizations.stylesheets and set it to true.
3. Type about:support in the address bar.
4. Find “Profile Folder” and click the “Show in Finder” (macOS) or “Open Folder” (Windows/Linux) button.
5. Create a new folder named chrome in your profile directory.
6. Inside the chrome folder, create a text file named userChrome.css.
7. Paste the code above into userChrome.css and save the file.
8. Restart Firefox.

Customising Colour Transitions

Firefox natively applies a transition effect to tab bar colour changes. To disable this behaviour and allow Adaptive Tab Bar Colour (ATBC) to update colours instantaneously, add the following code to your CSS theme:

:root {
	--ext-theme-background-transition: none !important;
	--inactive-window-transition: none !important;
}

Alternatively, you may prefer smooth colour transitions for the tab bar. As this cannot be natively supported due to technical limitations, add the following code to your CSS theme (thanks to @Moarram):

#navigator-toolbox, #TabsToolbar, #nav-bar, #PersonalToolbar, #sidebar-box, .tab-background, .urlbar-background, findbar, body {
	transition:
		background-color 0.5s cubic-bezier(0, 0, 0, 1) !important,
		border-color 0.5s cubic-bezier(0, 0, 0, 1) !important,
		outline 0.5s cubic-bezier(0, 0, 0, 1) !important;
}

To enable smooth colour transitions in the Sidebery UI, add the following code to the Sidebery Style Editor (thanks to @MaxHasBeenUsed):

.Sidebar, .bottom-space {
	transition: background-color 0.5s cubic-bezier(0, 0, 0, 1) !important;
}

How to apply custom CSS

1. Type about:config in the address bar and press Enter.
2. Search for toolkit.legacyUserProfileCustomizations.stylesheets and set it to true.
3. Type about:support in the address bar.
4. Find “Profile Folder” and click the “Show in Finder” (macOS) or “Open Folder” (Windows/Linux) button.
5. Create a new folder named chrome in your profile directory.
6. Inside the chrome folder, create a text file named userChrome.css.
7. Paste the code above into userChrome.css and save the file.
8. Restart Firefox.

Adaptive Theme in Context Menus

To apply the adaptive theme to context menus, add the following code to your CSS theme:

:is(menupopup, panel):where(:not([type="arrow"])) {
	--panel-background-color: unset !important;
	--panel-border-color: unset !important;
}

Additionally, native context menus must be disabled by opening about:config and setting the following preferences to false:

• widget.gtk.native-context-menus (Linux)
• widget.macos.native-context-menus (macOS)

How to apply custom CSS

1. Type about:config in the address bar and press Enter.
2. Search for toolkit.legacyUserProfileCustomizations.stylesheets and set it to true.
3. Type about:support in the address bar.
4. Find “Profile Folder” and click the “Show in Finder” (macOS) or “Open Folder” (Windows/Linux) button.
5. Create a new folder named chrome in your profile directory.
6. Inside the chrome folder, create a text file named userChrome.css.
7. Paste the code above into userChrome.css and save the file.
8. Restart Firefox.

Compatibility with Third-Party CSS Themes

A third-party CSS theme works with Adaptive Tab Bar Colour (ATBC), as long as they use Firefox’s standard colour variables (e.g. --lwt-accent-color for the tab bar colour). This is an example of an ATBC-compatible CSS theme.

Title Bar Buttons on Linux with GTK Theme

Firefox’s title bar buttons may revert to the Windows style. To prevent this, access “Advanced Preferences” (about:config) and set widget.gtk.non-native-titlebar-buttons.enabled to false. (Thanks to @anselstetter)

Safety Reminder

Beware of malicious web UIs. It is important to distinguish between the browser UI and the web UI. For further information, please refer to The Line of Death. (Thanks to u/KazaHesto)