FF128 tab color setting

User Help for Mozilla Firefox
robge99221
Posts: 13
Joined: March 15th, 2023, 12:45 am

FF128 tab color setting

Post by robge99221 »

I'm using dark mode and I've just updated to the latest version, Firefox 128.0.

I immediately noticed that the tab color setting has been slightly changed from the previous versions including FF127.X.

For instance, atcive tab's bright green line is now gone.

How can I retrieve the previous setting?

Thanx.
morat
Posts: 6565
Joined: February 3rd, 2009, 6:29 pm

Re: FF128 tab color setting

Post by morat »

I don't have an active tab's bright green line in Firefox 127.

Is the feature a style in the userChrome.css file?
robge99221
Posts: 13
Joined: March 15th, 2023, 12:45 am

Re: FF128 tab color setting

Post by robge99221 »

Sorry for the confusion. The bright green line (probably for the dark mode only?) for active tab used to be there several versions ago, I'm not exactly sure but it stayed there for some versions, and then it's gone.

But I liked the design, so I'd like to use it again.

I've modified the userChrome.css file to change the tab design a few years ago, but the bright green line only appeared much later when I updated to a newer version.

If I can't simply retrieve any previous version setting, here is my ideal tab design:

Active tab: background color is light grey, with bright green line
Non-active tab: background color is dark grey, with white (#FFFFFF) page title text

Would this be possible?
morat
Posts: 6565
Joined: February 3rd, 2009, 6:29 pm

Re: FF128 tab color setting

Post by morat »

Sorry, I tested with the system theme in Firefox 127, not the dark theme.

I got something working in the dark theme using the userChrome.css file in Firefox 128, but I don't remember how to style the bright green line exactly.

Code: Select all

/* Firefox userChrome.css */

tab.tabbrowser-tab:not([visuallyselected], [multiselected]) {
  color: white !important;
}
vbox.tab-background:not([selected], [multiselected]) {
  background-color: dimgray !important;
}
tab.tabbrowser-tab:is([visuallyselected], [multiselected]) {
  color: black !important;
}
vbox.tab-background:is([selected], [multiselected]) {
  background-color: lightgray !important;
  border-bottom: 3px solid lime !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
HTML Color Names
http://www.w3schools.com/tags/ref_colornames.asp

Reference
http://searchfox.org/mozilla-release/so ... r/tabs.css
http://searchfox.org/mozilla-release/so ... ersion.txt
robge99221
Posts: 13
Joined: March 15th, 2023, 12:45 am

Re: FF128 tab color setting

Post by robge99221 »

Thank you very much for the answer. It works very well.

And I have one more question about the tab design for FF128.

The page title text color (on non-active tabs) is "white" in my userChrome.css, but when I see the Firefox UI, it's not actually white, and its grey out, whatever the tabs' background color is. It's just like URL in the URL field shows an domain with white but the rest (https://..../....) goes grey-out.

I believe this is to keep attention away from non-active tabs, but I'm not a big fan of this idea. Because when you are on a website and then want to move to another one on another tab, you need to look for a title and it should be clearly visible to find out.

So I'd like to know how to avoid this grey out (on non-active tabs) issue.
morat
Posts: 6565
Joined: February 3rd, 2009, 6:29 pm

Re: FF128 tab color setting

Post by morat »

Are you talking about the location bar?

Test page
https://www.mozillazine.org/

Location bar displays "https://www." in gray and "mozillazine.org" in white and "/" in gray.

I don't know how to change the greying out.

Code: Select all

/* Firefox userChrome.css */

#urlbar input#urlbar-input {
  color: pink !important;
}
That doesn't work. Location bar displays "https://www." in dark pink and "mozillazine.org" in pink and "/" in dark pink.

Reference
http://searchfox.org/mozilla-release/so ... rchbar.css
robge99221
Posts: 13
Joined: March 15th, 2023, 12:45 am

Re: FF128 tab color setting

Post by robge99221 »

Thank you but I only mentioned the location bar as an example of grey out issue.

What I would like to change is the non-active tabs' text color, which goes grey out even the code in userChrome.css is written "white."

How can I avoid this grey out and see the text always white?
LewS
Posts: 197
Joined: January 28th, 2014, 2:18 pm

Re: FF128 tab color setting

Post by LewS »

This code works for Firefox 128.0 esr with macOS Sonoma. Maybe you can modify it, or some part of it, to get what you want.

Code: Select all

/* 
Tabs background colors. 
*/
#TabsToolbar .tab-background[selected] {  
      background-color: rgba(255,255,245,0.70) !important; 
      background-image: none !important;}
#TabsToolbar .tab-background:not([selected]) {   
      background-color: rgba(255,255,245,0.50) !important;
      background-image: none !important;}
#tabbrowser-tabs .tabbrowser-tab:hover  .tab-content {   
      background-color: rgba(255,255,245,0.25) !important;
      background-image: none !important;}
/* 
Tab text color and size. 
*/
#TabsToolbar .tab-text { 
      color: black !important;}
#TabsToolbar .tab-text[selected] {     
      font-size: 25px !important;
      font-weight: 700 !important;}
#TabsToolbar .tab-text:not([selected]) {        
      font-size:25px !important;
      font-weight: 600 !important;}
robge99221
Posts: 13
Joined: March 15th, 2023, 12:45 am

Re: FF128 tab color setting

Post by robge99221 »

Thank you. I did modified and used it, but it didn't work. I'm not sure if I did something wrong or not.

The text still goes grey on non-active tabs while it goes white for active tab.

What I need is white-color text which does not gray out but always stays white on both active and non-active tabs.
morat
Posts: 6565
Joined: February 3rd, 2009, 6:29 pm

Re: FF128 tab color setting

Post by morat »

My code displays color white & background dimgray on unselected tabs and color black & background lightgray on selected tabs.

I'm not seeing the greying out issue with the tab text on unselected tabs.

Maybe it's an addon or preference or another style entry that's causing the issue.
User avatar
dickvl
Posts: 54202
Joined: July 18th, 2005, 3:25 am

Re: FF128 tab color setting

Post by dickvl »

You can check the rules in the Browser Toolbox.
https://firefox-source-docs.mozilla.org ... r_toolbox/
LewS
Posts: 197
Joined: January 28th, 2014, 2:18 pm

Re: FF128 tab color setting

Post by LewS »

By modifying the code I previously posted as follows, and using the default dark theme, I was able to get selected and not-selected tab-text the same color.

Code: Select all

/* 
Tabs background colors. 
*/
#TabsToolbar .tab-background[selected] {  
      background-color: rgba(0,0,0,0.70) !important; 
      background-image: none !important;}
#TabsToolbar .tab-background:not([selected]) {   
      background-color: rgba(0,0,0,0.70) !important;
      background-image: none !important;}
#tabbrowser-tabs .tabbrowser-tab:hover  .tab-content {   
      background-color: rgba(0,0,0,0.70) !important;
      background-image: none !important;}
/* 
Tab text color and size. 
*/
#TabsToolbar .tab-text[selected] {  
      color: rgba(255,255,245,0.7) !important;  
      font-size: 25px !important;
      font-weight: 700 !important;}
#TabsToolbar .tab-text:not([selected]) { 
      color: rgba(255,255,245,0.9) !important;     
      font-size:25px !important;
      font-weight: 900 !important;}
      
It appears that somehow a transparency of 20 - 30 % is applied to the non-selected tab-text; what this coce does is "fix" that using rgba's alpha and the font-weights. Not elegant, but maybe you can get close to what you want.

Be sure that this code goes after any other in userChrome that aftects tabs.

Good luck!
robge99221
Posts: 13
Joined: March 15th, 2023, 12:45 am

Re: FF128 tab color setting

Post by robge99221 »

> morat

Thank you. I deleted all other code on my userChrome.css file and simply put your code only, but with my environment (FF128, mac, dark mode), the text still goes grey out on non-active (non-selected) tabs, when the tab background color is black.

> LewS

Thank you, but same results with your 1st code. For the latter code, the text color for both active and non-active tabs look exactly the same, but this color is something grey-ish, not white, and this color is not what I'm looking for.

"It appears that somehow a transparency of 20 - 30 % is applied to the non-selected tab-text"

It seems this transparency configuration is the cause of this problem, what I've been calling as a grey-out issue.

The similar grey-out configuration is also applied to Firefox's settings pages where you see "General," "Home," "Search," "Privacy & Security," etc.

I don't care much for the setting pages, but I wish I could block this configuration for the text color on non-active tabs.
LewS
Posts: 197
Joined: January 28th, 2014, 2:18 pm

Re: FF128 tab color setting

Post by LewS »

That was just an example to show the same white(greyish) tab text. Try changing the colors; i.e., "color: rgba(255,255,255,1.0) !important;" for both
will make them whiter, but with the unselected tab-text still greyer. Then changing the alpha value of the background might fool your eyes into thinking they're the same.

For now, at least, that's all I've got to offer.
morat
Posts: 6565
Joined: February 3rd, 2009, 6:29 pm

Re: FF128 tab color setting

Post by morat »

You can use the color picker in the Browser Toolbox to check the color.

The color picker says rgba(255,255,255,1.0) is #ffffff.
The color picker says rgba(255,255,255,0.5) is #b4b4b4. (looks grayish)

#ffffff = rgb(255,255,255) = white
#b4b4b4 = rgb(180,180,180)
#000000 = rgb(0,0,0) = black
Post Reply