Firefox window controls get changed, doesn't match color of the taskbar

[DylwinTFTW]

Description

When using Firefox with Rectify 11, the window controls change to be inconsistent with the rest of the UI.

Steps To Reproduce

1. Install Rectify11
2. Launch Firefox

Rectify11 Version

Version 3 RC1

Windows Version

Windows 11 22H2 2621.2134

Logs

[ooTruffle]

This is firefox falling back to high contrast with custom themes

To fix it apply this userChrome.css
https://mrotherguy.github.io/firefox-csshacks/?file=window_control_fallback_for_custom_windows_theme.css

[alanthast0s]

This is firefox falling back to high contrast with custom themes

To fix it apply this userChrome.css https://mrotherguy.github.io/firefox-csshacks/?file=window_control_fallback_for_custom_windows_theme.css

how can I apply this userChrome.css ?

[1amSimp1e]

You can apply by:

• First, on firefox type in about:profiles then at the root directory click open folder
• Then, go to about:config find toolkit.legacyUserProfileCustomizations.stylesheets double click to enable
• After that, make a folder named chrome in the directory that u opened then create a file name userChrome.css inside that folder
• Then copy this to your userChrome.css:

.titlebar-button{
  background-color: transparent !important;
  -moz-context-properties: stroke !important;
  stroke: currentColor !important;
}
.titlebar-button:hover{ background-color: hsla(0,0%,100%,.32) !important }
.titlebar-close:hover{ background-color: hsl(355,86%,49%) !important }

.titlebar-close{ list-style-image: url(chrome://browser/skin/window-controls/close.svg) !important }
.titlebar-min{ list-style-image: url(chrome://browser/skin/window-controls/minimize.svg) !important }
.titlebar-max{ list-style-image: url(chrome://browser/skin/window-controls/maximize.svg) !important }
.titlebar-restore{ list-style-image: url(chrome://browser/skin/window-controls/restore.svg) !important }

• Then restart your firefox

[alanthast0s]

You can apply by:

* First, on firefox type in `about:profiles` then at the root directory click `open folder`

* Then, go to `about:config` find `toolkit.legacyUserProfileCustomizations.stylesheets` double click to enable

* After that, make a folder named `chrome` in the directory that u opened then create a file name `userChrome.css` inside that folder

* Then copy this to your `userChrome.css`:

.titlebar-button{
  background-color: transparent !important;
  -moz-context-properties: stroke !important;
  stroke: currentColor !important;
}
.titlebar-button:hover{ background-color: hsla(0,0%,100%,.32) !important }
.titlebar-close:hover{ background-color: hsl(355,86%,49%) !important }

.titlebar-close{ list-style-image: url(chrome://browser/skin/window-controls/close.svg) !important }
.titlebar-min{ list-style-image: url(chrome://browser/skin/window-controls/minimize.svg) !important }
.titlebar-max{ list-style-image: url(chrome://browser/skin/window-controls/maximize.svg) !important }
.titlebar-restore{ list-style-image: url(chrome://browser/skin/window-controls/restore.svg) !important }

* Then restart your firefox

thank you so much!!

[WildByDesign]

Apparently Firefox 117 (in my testing so far) has fixed the titlebar issues and the custom theme userChrome.css is no longer needed.

Firefox 117 seems to have also fixed SystemColors-related bugs in many other areas such as drop down menus, forms, etc.

Lots of improvements for use with custom Windows themes.

The big downside seems to be that Firefox removed the ability for transparent titlebar and therefore no Mica anymore.