Way to change background colour of min,max,close x buttons in Firefox

treblefree · 06 Mar 2022

I have latest version of Mozilla Firefox 97.0.2 and and use Light theme and i find it awkward to see the minimum.maximize and close x icons in top right hand corner.Various themes i have i tried in Firefox does not solve the issue.
Is there anyway to change the background colour so i can see the horizontal line for minimize,the square for maximize and x for close.The close x background is only one the changes to red when you hover over with mouse.

Thank you.

My Os is Windows 10 Pro 21H2
Os Build 19044.1566

Callender · 06 Mar 2022

The hover > red close option is standard. Not sure how to change that.
Take a look at these screenshots:

Way to change background colour of min,max,close x buttons in Firefox-ff1.png

Way to change background colour of min,max,close x buttons in Firefox-ff2.png

Way to change background colour of min,max,close x buttons in Firefox-ff3.png

So that's an addon allowing background colour changes but also system font has been changed which can lead to problems if the wrong font is used. Oh, and also a custom color profile for monitor/ screen has been used.

treblefree · 07 Mar 2022

Thanks for reply,

After checking the mininum,maximise and close x buttons are down to Mozilla Firefox developers.They are also small in Microsoft Edge.Appears to be some sort of standard.

In Firefox,i believe you have do some CSS coding .

Anyway,just have to get used to it.

Thank you

das10 · 08 Mar 2022

I know your issue is solved, but this is for information only. So if one goes the CSS route, it is possible to change the caption button icons and their backgrounds and also the hover colors, to have slightly more contrast (Firefox already contains the High-Contrast icons, but I have no idea why it doesn't have some option for the user to set them).

Code:

/* Colors of Caption Button Icons (and their Background if wanted- eg see comment under .titlebar-min)         */

/*Icons and their background*/
.titlebar-min {
list-style-image: url(chrome://browser/skin/window-controls/minimize-highcontrast.svg) !important;
color: Black !important;
/*   background: rgba(222,222,222,1) !important;    */
}

.titlebar-max {
list-style-image: url(chrome://browser/skin/window-controls/maximize-highcontrast.svg) !important;
color: Black !important;
}

.titlebar-restore {
list-style-image: url(chrome://browser/skin/window-controls/restore-highcontrast.svg) !important; 
color: Black !important;
}

.titlebar-close {
list-style-image: url(chrome://browser/skin/window-controls/close-highcontrast.svg) !important;
color: Black !important;
}


/*Hover colors*/
.titlebar-min:hover{
 color: White !important;
 list-style-image: url(chrome://browser/skin/window-controls/minimize-highcontrast.svg) !important;
 background: rgba(0,155,0,1.00) !important;
} 

.titlebar-max:hover{
 list-style-image: url(chrome://browser/skin/window-controls/maximize-highcontrast.svg) !important;
 color: White !important;
 background: rgba(0,155,0,1.00) !important;
} 

.titlebar-restore:hover{
 color: White !important;
 list-style-image: url(chrome://browser/skin/window-controls/restore-highcontrast.svg) !important;
 background: rgba(0,155,0,1.00) !important;
} 

.titlebar-close:hover{
 background: rgba(255,15,15,1.00) !important;
}

nb: this only works when show "Title Bar" is disabled in "Customise Toolbar".

treblefree · 09 Mar 2022

Sorry for delay in replying as i am Job hunting.

I managed alter Firefox theme to Glossy-night silence.The min,max and close x are visible but still small....but the blue visited bar re -appeared which Firefox default theme does not show by modifying about:config....i cannot recall the code ...browser.urlbar.Maxsearch bar...something similar.

There a link on tenforums....Change Size of Caption Buttons in Windows 10

To alter size of min,max close x by making the height of titles bar slighty bigger.
I will try the instructions on my test pc to see what happens.