The tab strip color matches that of your selected color for Window boarders on Windows 10, change your color there to have it that color in Firefox!

Are you shitting me? Why would that be a default? Make it customisable, goddamit.

Hi andrewmyles, the built-in way to change the color behind the tabs are Themes. You can access themes in the Customize pane or the Add-ons page.

Customize Firefox controls, buttons and toolbars

The Themes button is at the bottom of the pane.

Get the Colorful Tabs extension, which will give you different colored tabs, but there's no way I have found to change the colors of the tabs & it seems to do this automatically & some tabs wind up with the same colors, but it is still better than black or white tabs.

stlogije said

Get the Colorful Tabs extension, which will give you different colored tabs, but there's no way I have found to change the colors of the tabs & it seems to do this automatically & some tabs wind up with the same colors, but it is still better than black or white tabs.

Tryed it not satisfied, TAbmix plus was awesome.

Apologies for reviving this thread but it seemed the best match to my question and I didn't want to start a duplicate.

I'm using 59.0.2 under Windows 7. Is there a way of changing the colour of the tabs so that they don't match the colour of their background bar? To my eyes they don't look like separate entities at all.

The method above of changing the Windows border colour really doesn't appeal, and every theme I've so far tried doesn't make the tabs and their background different. If anyone knows of a theme or themes which do what I'm after, or if there's a different way of achieving it, I'd be grateful for the information. Many thanks. .

Hi BertCoules, are you using one of the three built-in Themes (default, Light, Dark)?

I don't have Windows 10 handy to check, but on Windows 7, the Light theme has more distinct tabs that are a different color from the empty part of the tab bar.

If you don't like the empty bar appearance with that theme, then someone would need to come up with a custom style rule to provide a background color for the tabs (if they are normally transparent).

Thanks for the reply. I should have said that I've tried all three of the built-in themes (and settled on Default as the easiest on the eyes overall) but I found that none of them, including the Light one, differentiate between the tabs and their background.

It hadn't occured to me that the tabs are actually coded to be transparent: that certainly would explain the problem. .

Hi BertCoules, I think the default theme has a dark tab bar. You should see divider lines between the tabs. I'm attaching a screenshot of what I think is the default appearance, and not the result of style hacking. Are those lines missing on yours, or are you looking for additional definition? It would be helpful to get a better understanding of what you're looking for.

Thanks for your reply and the screenshot. I appreciate your help.

Under Tools/Add-ons/Themes I see three entries: Default, Dark and Light. I'll attach a screenshot of what Default looks like on my PC.

My Dark theme looks like the second screenshot.

In both schemes the tab are indistinguishable from their background. They don't actually look like tabs at all but rather like a single line of spaced-out words and a few favicons separated by very faint, less-than-full-height vertical lines. Only the active tab is clear as an individual element.

It's interesting that in your image the tabs are quite a different colour from the bar: presumably this is down to your basic Windows colour scheme. I suppose I could investigate changing this on my setup but I'd rather not if a different Firefox-only solution exists.

Hi BertCoules, I think because you moved the tabs below the address bar, you must have a userChrome.css file already.

So as a potential addition to userChrome.css, this will give some definition to background tabs (example screenshot attached):

/*** Background Tab Tweaks ***/
/* Add a gap above and on the sides */
.tabbrowser-tab:not([selected]) {
  padding: 2px 1px 0 0 !important;
  border: none !important;
}
/* Remove vertical dividing lines */
.tabbrowser-tab:not([selected])::after {
  display: none !important;
}
/* Light border, rounded top corners, background fog */
.tabbrowser-tab:not([selected]) .tab-background {
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-bottom: none !important;
  border-radius: 6px 6px 0 0 !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
}

Hi BertCoules, if you prefer the lighter color scheme, you may need to switch that around a bit. For example:

/*** Background Tab Tweaks ***/
/* Add a gap above and on the sides */
.tabbrowser-tab:not([selected]) {
  padding: 2px 1px 0 0 !important;
  border: none !important;
  background-color: #ddd !important;
}
/* Remove vertical dividing lines */
.tabbrowser-tab:not([selected])::after {
  display: none !important;
}
/* Gray border, rounded top corners, background fog */
.tabbrowser-tab:not([selected]) .tab-background {
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-bottom: none !important;
  border-radius: 6px 6px 0 0 !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
}

Thanks so much for that. I'll give both versions a go and see what happens.

LATER...

Both of those worked a treat, so thanks again. I prefer the second with its increased spacing between the tabs, and I might have a play around with the colours for even more contrast, but it's a huge improvement and I'm very grateful to you.