Wow, that blue color is amazingly vivid. Did you pick that or is Firefox getting it from your Windows 10 theme?

Speaking of themes, you could experiment with some of the others:

• Light theme (built-in) -- the menu doesn't fade out very much, but it's bland; tab titles fade a bit, but there's more contrast than what you show in your screenshot

• Dark theme (built-in) -- the menu doesn't fade out, but tabs do fade quite a bit

• Add-on themes -- you have countless choices, so you could try a few of them

Article on themes: Built-in themes in Firefox - alternative to complete themes

Add-ons: https://addons.mozilla.org/firefox/themes/

The blue is what I picked. I had heard about plugs in to fix this issue, but I was trying to avoid adding another plug in or add on, as I've found that sometimes FF doesn't play nice when you have a lot of plug ins. I had also heard that there may be a way to edit the userChrome.css file to get the in active title bar to have a better color but haven't found a script that would do what I want. If no one has a good edit for this then I guess my only option is to try more themes although I didn't see anything that I liked so far. Thanks for the help.

If you're interested in a userChrome.css approach, the key would be to look at the rules keying off of -moz-window-inactive and override those.

For example, compare the active and inactive background colors in the browser.css file:

:root:-moz-lwtheme {
  background-color: var(--lwt-accent-color);
}
:root:-moz-lwtheme:-moz-window-inactive {
  background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
}

So to override that, you could try setting the same background color for inactive:

/* Inactive title bar same background color as active */
:root:-moz-lwtheme:-moz-window-inactive {
  background-color: var(--lwt-accent-color) !important;
}
/* Same text color in inactive as active */
:root[tabsintitlebar]:not([inFullscreen]):-moz-window-inactive {
  color: CaptionText !important;
}

However, I don't know whether that is what you need, there are different style sheets for different Windows themes. You can always specify a particular color instead of using the var() approach.

Do you already have a userChrome.css file? If not, when you have a spare 10 minutes, you could set one up as follows:

This assumes you do not already have a userContent.css file. If you do already have a working userContent.css file, you just need to add the rule above to your file.

(A) Select and copy the above overriding style rule code

(B) Generate and download a userContent.css file

Open the following page and paste the above rules into the editor, replacing the sample rule:

https://www.userchrome.org/download-userchrome-css.html

Then change the file name selection to userContent.css and click "Generate CSS File". Save the userContent.css file to your computer. (See first attached screenshot)

Use the downloads list on the toolbar to open the downloads folder directly to the new userContent.css file. (See second attached screenshot)

Minimize (don't close) that Windows Explorer window for later reference.

(C) Create a new chrome folder in your profile folder

The following article has the detailed steps for that (#1, #2, and I recommend #3)

https://www.userchrome.org/how-create-userchrome-css.html

I have videos for both Windows and Mac in case the text is not clear.

(D) Move the userContent.css file you generated in Step B into the chrome folder you created in Step C

(E) For Firefox 69+, set Firefox to look for userChrome.css at startup -- see step #6 in the above article.

The next time you exit Firefox and start it up again, it should discover that file and apply the rules to the toolbar area.

Success?

I realize I neglected the text color in my initial post (yours is reversing from white to black), so I'll add that in once I figure out the rules.

I'm guessing a bit that these are the relevant lines, from :

    :root[tabsintitlebar]:not([inFullscreen]) {
      color: CaptionText;
    }

    :root[tabsintitlebar]:not([inFullscreen]):-moz-window-inactive {
      color: InactiveCaptionText;
    }

So to override, let's try:

/* Same text color in inactive as active */
:root[tabsintitlebar]:not([inFullscreen]):-moz-window-inactive {
  color: CaptionText !important;
}

Thanks, I'll look at this soon. It's college football now! Thanks for the help.

I tried to understand your suggestions but must not be doing something correctly. You said…''If you're interested in a userChrome.css approach, the key would be to look at the rules keying off of -moz-window-inactive and override those. For example, compare the active and inactive background colors in the browser.css file'' I found nothing in userChrome related to -moz-window-inactive. I also didn’t find a browser.css file. So I tried cutting and pasting your suggestion below into my userChrome.css with no change in the color of the inactive FF window. So to override that, you could try setting the same background color for inactive: '''''/* Inactive title bar same background color as active */

root:-moz-lwtheme:-moz-window-inactive {

 background-color: var(--lwt-accent-color) !important;

} /* Same text color in inactive as active */

root[tabsintitlebar]:not([inFullscreen]):-moz-window-inactive {

 color: CaptionText !important;

}''''' Next I created the userContent.css file and then cut and pasted the above into it, then saved this css file in the Chrome folder but again. No change. Then I added the following to the user Content.css file but again no change: '''''/* Same text color in inactive as active */

root[tabsintitlebar]:not([inFullscreen]):-moz-window-inactive {

 color: CaptionText !important;

} Lastly, to be sure we are on the same page…When FF is the active window, the title bar is a nice rich blue but when the FF window is inactive, it becomes this washed out gray with the menu and the “X” at the far right are the same color and so almost invisible. All I really want is to change the font color of the menu and the minimize and exit symbols to something darker than the inactive title bar color (in this case gray) so that I can see them. I don’t care that the inactive FF window’s title bar is gray…that is fine.

I didn’t think this would be so hard or complicated to do.

I really appreciate your help, but at this point, since I am at the zenith of my understanding of all this, I must not be doing something correctly or understand what you are trying to help me with.

Okay, if trying to work with the variables isn't successful, you may need to directly assign some colors:

/* Title bar with Menu Bar background */
#toolbar-menubar {
  background-color: blue !important;
}
/* Menu bar text and window buttons color */
#toolbar-menubar #main-menubar,
#toolbar-menubar .titlebar-button {
  color: white !important;
}
/* Override window buttons fading */
.titlebar-button > .toolbarbutton-icon:-moz-window-inactive {
  opacity: 1 !important;
}

Does that works on yours? You may need to adjust the blue color to match your system theme.

I cut and pasted the above into userChrome.css at the very bottom but still no change. Active title bar is perfect...inactive title bar is just gray with hard to see menu or any icons in the title bar. As a matter of fact, the only way I can see the "x" is to hover my cursor at the upper right hand corner of the title bar till the 'X" appears surrounded by a red box. I must have a very stubborn FF. Could I have some code in the userChrome.css that is interfering with your suggested solution?

bmail said

Could I have some code in the userChrome.css that is interfering with your suggested solution?

Hard for me to guess. You could try putting the new code at the beginning of the file and see whether that makes any difference.

Well that suggestion kinda worked! See the new screen shot showing FF active and inactive. As you can see the top portion (with the Menu and icons) remains the same color blue for active or inactive window. The only difference now between the active window and inactive window is in the tab area. Active...blue Inactive...gray. So if there is no way to get the tab and menu area the same color when inactive with just easier to see menu and icons, then your suggestion will certainly be better than before. Kinda makes me wonder what was going on in the rest of the code that was blocking your suggestion when I had it pasted last and if something else is now not working? Thanks for the help.