# Adaptive Tab Bar Colour: tinting the Firefox theme to match the page

> Adaptive Tab Bar Colour is a Firefox add-on that recolours the browser theme to match the site you are looking at, in the way Safari tints its tab bar on macOS. It works by setting Firefox theme custom properties, which is why the documentation spends as much space on userChrome.css as on the extension itself.

**atbc-org/Adaptive-Tab-Bar-Colour** — Changes the colour of Firefox theme to match the website’s appearance.

- Repository: https://github.com/atbc-org/Adaptive-Tab-Bar-Colour
- Website: https://addons.mozilla.org/firefox/addon/adaptive-tab-bar-colour/
- Stars: 812 · Forks: 42
- Language: TypeScript
- License: MIT
- Published: 2026-10-20 · Updated: 2026-10-20 · Language: en
- Canonical page: https://hysenlabs.com/projects/atbc-org-adaptive-tab-bar-colour

## Safari's tab tinting, brought to Firefox

Adaptive Tab Bar Colour changes the colour of the Firefox theme to match the appearance of the website you are viewing. The documentation compares it directly to the tab bar tinting feature in Safari on macOS, which is the clearest way to picture what it does: the chrome around the page takes on the page's colour.

The implementation language is TypeScript, the licence is MIT, and the add-on is published through addons.mozilla.org with the listing as the project's homepage. The last push to the repository was on 2026-10-21 and the most recent release is v4.3.0 from 2026-09-30, preceded by beta builds of the same version in the preceding days.

The interesting part is that the extension itself is the smaller half of this project. The repository documentation is dominated by how to adjust Firefox from the inside: disabling the native colour transition, adding your own smooth transitions, applying the adaptive theme to context menus, and the mechanics of getting userChrome.css into a Firefox profile at all.

That is not padding. The reason it is needed is visible in the compatibility list: any add-on that modifies the Firefox theme conflicts with this one, because they all write to the same place. Two things writing the same theme custom property means the last writer wins and the result flickers between them.

The README is also translated into twelve languages, including English and English US, Azərbaycan, Deutsch, Español, Français, 日本語, Português do Brasil, Русский, Türkçe, 简体中文 and 繁體中文, which tells you something about the audience the author is serving.

## Only one add-on may own the theme

The documentation has a Works Well With section and an Incompatible With section, and the second one is the more informative.

It works well with Dark Reader, which inverts page colours rather than the browser theme, with Stylus, a user style manager, and with Dark Mode Website Switcher, which flips sites between light and dark. None of those own the Firefox theme, so none of them fights the extension for control of it.

It is incompatible with Adaptive Theme Creator, Chameleon Dynamic Theme, VivaldiFox and Envify, and with any other add-on that modifies the Firefox theme. The last clause is the general rule, and it explains the specific entries: Chameleon Dynamic Theme and VivaldiFox are themselves dynamic theme tinters, so two tinters means two sources of truth for the same colour.

This is the single most useful piece of information for anyone deciding whether to install it. If you already run one of the listed extensions, you have to choose. The add-on does not offer a partial mode, a fallback rule or a priority setting, and the documentation does not describe a way to make two theme writers cooperate.

The second practical consequence is that the extension is not for everyone. The feature it adds is cosmetic, it is Firefox only, and it occupies an exclusive slot in the theme's control chain. Whether that is worth it depends entirely on whether you find a mismatched browser chrome visually distracting, which is a personal judgement that no technical property of the project will settle.

## Instant colour changes need Firefox's transition switched off

Here is where the project's documentation earns its length.

Firefox natively applies a transition effect to tab bar colour changes. That means the browser fades between colours when the tint updates, and for an add-on whose whole purpose is to track the page you are on, that fade is a visible delay between the site changing and the browser following it.

To disable this behaviour and let the add-on update colours instantaneously, the documentation asks you to add two lines to your CSS theme:

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

Two properties, both with the ext prefix that Firefox uses for extension related theme values. Setting the transition to none is the whole fix.

The alternative is to keep a transition and control it yourself. The documentation is honest that this cannot be done natively due to technical limitations, and that as a result you have to write the transition rules yourself:

```css
body, findbar, #navigator-toolbox, #TabsToolbar, #nav-bar, #PersonalToolbar, #sidebar-box, .tab-background, .urlbar-background {
	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;
}
```

That selector list is the interesting part. It names the chrome regions that have to move together, from the toolbox and the tab toolbar through the nav bar, the find bar, the sidebar box, the personal toolbar and the URL bar background, and it transitions three properties rather than one so that borders and outlines do not lag behind the fill.

The same treatment is needed for the Sidebery sidebar UI, which is a separate interface with its own styling:

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

Both the smooth transition snippet and the Sidebery one are credited to named contributors in the documentation, which is a good sign about how the community treats this add-on.

## Getting userChrome.css into a Firefox profile

None of the CSS in this project does anything until it is in a file Firefox reads at startup, and the documentation spells out the procedure because Firefox does not make it obvious.

The steps are: type about:config in the address bar and press Enter, search for toolkit.legacyUserProfileCustomizations.stylesheets and set it to true. Then type about:support in the address bar, find the Profile Folder entry and click the Show in Finder button on macOS or Open Folder on Windows and Linux. Inside that profile directory create a folder named chrome, and inside the chrome folder create a text file named userChrome.css. Paste the code into userChrome.css, save it, and restart Firefox.

Two details in those steps carry the weight. The preference has to be flipped on manually, because modern Firefox does not read userChrome.css by default, and the file has to be named exactly userChrome.css inside a folder named exactly chrome inside the profile root, or it is ignored silently.

The restart requirement is the other one. Firefox reads the user stylesheet at startup, so a change to userChrome.css has no effect until the browser is restarted, which is worth knowing before you conclude that your CSS is wrong.

The procedure is the same whether you are applying the transition tweaks or the context menu rules, and the documentation repeats it in each place it is needed rather than linking to a single section, which is a small sign of a documentation that is written for someone arriving at it from a search result.

## Context menus need native menus disabled first

Applying the adaptive theme to context menus takes two steps, and the second one is easy to miss.

The CSS is short:

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

The selector targets menupopup and panel elements while excluding the arrow type, and it unsets the panel background and border colour variables so that the panel inherits the adaptive theme instead of using its own.

Unsetting the variables is only half of it, because Firefox renders some context menus natively rather than as styled elements, and a native menu does not inherit CSS variables. To make the rule apply, native context menus have to be disabled in about:config by setting two preferences to false: widget.gtk.native-context-menus on Linux and widget.macos.native-context-menus on macOS.

That is a real cost of this feature rather than a detail. Turning those preferences off changes how every context menu in the browser is drawn, not just the colour, and the documentation does not say what the menus look like afterwards, only that they must be disabled for the adaptive theme to reach them.

The same file also demonstrates the general shape of what this project is doing. Firefox exposes its theme as CSS custom properties on the root element, and an add-on that wants to change the theme simply writes new values to those properties. The extension supplies the per-site colour, and userChrome.css is where you adjust how the browser reacts to those values changing.

## WXT, Vitest and Selenium in the build

The development side of the repository shows a modern extension stack, and the package manifest describes it accurately.

The build tool is WXT, with the build script running wxt build -b firefox for the release build and cross-env BINARY=firefox wxt --mode beta for the development server, plus a start:dev variant that sets BINARY=deved. There is a postinstall hook running wxt prepare, and a zip script that shells out to bash scripts/zip.sh to package the artefact.

Tests run under Vitest, with vitest run for the normal suite and a test:headless variant that sets HEADLESS=true through cross-env. The dev dependencies explain why: selenium-webdriver at 4.51.0 and geckodriver at 8.0.0 are present, which means the test suite drives a real Firefox rather than a simulated DOM. That is the right choice for an extension whose entire behaviour depends on how the browser paints its chrome.

Formatting is Prettier with a stack of plugins, including one that sorts imports, one that sorts JSON keys and one that orders CSS properties, plus a separate plugin for JSDoc comments, and there is a TypeScript toolchain at version 7.0.2.

The runtime dependencies are small: React and React DOM at 19.3.1, clsx for class name composition, and @wxt-dev/i18n, which is the internationalisation module and explains the twelve translated READMEs.

The repository layout is conventional for a WXT project, with src, public, scripts and tests directories, a wxt.config.ts and a vitest.config.ts, and it also carries CONTRIBUTING.md, SECURITY.md and a file called SOURCE_CODE_REVIEW.md, which is a public document worth reading if you are thinking about running this in a browser profile that matters to you.

## Conclusion

Adaptive Tab Bar Colour suits a Firefox user who spends the day on sites with their own strong colour identity and wants the browser chrome to stop being a different colour from the page, and who is willing to edit userChrome.css to get the transition behaviour they want. It is the wrong choice for a Chromium user, since it is a Firefox add-on, and it is the wrong choice if you already run another add-on that modifies the Firefox theme, because the project lists those as incompatible and the conflict produces visible fighting over the same theme properties. Verify three things before you commit: that the tinting behaves with the add-ons you already run, which the compatibility list names, that your Firefox profile accepts userChrome.css customisation, which requires a preference change, and that the colour transition behaviour you expect matches what Firefox does natively before you override it.

## FAQ

### What does the Adaptive Tab Bar Colour Firefox add-on do?

It dynamically adjusts the Firefox theme to match the appearance of the website you are viewing, in a similar way to the tab bar tinting feature in Safari on macOS. It is MIT licensed and published through addons.mozilla.org.

### Which Firefox add-ons conflict with Adaptive Tab Bar Colour?

The documentation lists Adaptive Theme Creator, Chameleon Dynamic Theme, VivaldiFox and Envify as incompatible, and more generally any other add-on that modifies the Firefox theme. The listed extensions that work well with it are Dark Reader, Stylus and Dark Mode Website Switcher.

### How do I make the tab bar colour update instantly?

Firefox applies its own transition to tab bar colour changes, so you add two properties to your CSS theme to remove it: --ext-theme-background-transition and --inactive-window-transition, both set to none with the important flag. The change goes into userChrome.css in your Firefox profile and needs a browser restart.

### How do I enable userChrome.css customisation in Firefox?

Set toolkit.legacyUserProfileCustomizations.stylesheets to true in about:config, then find the Profile Folder in about:support and open it, create a folder named chrome inside it, create a file named userChrome.css inside that folder, paste your CSS and restart Firefox.

### How do I apply the adaptive theme to context menus?

Add CSS that unsets the panel background and border colour variables for menupopup and panel elements, and disable native context menus in about:config by setting widget.gtk.native-context-menus on Linux and widget.macos.native-context-menus on macOS to false, because native menus do not inherit the theme variables.

### How is the Adaptive Tab Bar Colour extension built and tested?

It is built with WXT, with npm run build running wxt build -b firefox, and tested with Vitest through npm run test or the headless variant that sets HEADLESS=true. The test dependencies include selenium-webdriver and geckodriver, so the suite drives a real Firefox, and packaging is handled by a zip script.

## Sources

- [atbc-org/Adaptive-Tab-Bar-Colour on GitHub](https://github.com/atbc-org/Adaptive-Tab-Bar-Colour)
- [License: MIT](https://github.com/atbc-org/Adaptive-Tab-Bar-Colour/blob/main/LICENSE)
- [Project website](https://addons.mozilla.org/firefox/addon/adaptive-tab-bar-colour/)
- [README](https://github.com/atbc-org/Adaptive-Tab-Bar-Colour/blob/main/README.md)
- [Releases](https://github.com/atbc-org/Adaptive-Tab-Bar-Colour/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/atbc-org-adaptive-tab-bar-colour