Theme color applies to window controls of all windows (Linux-only)

[filips123]

Description

When changing the titlebar/theme color is enabled, the text and window control colors are changed based on color to provide contrast. However, when multiple web apps in the same profile are opened at the same time, and they have different colors (for example, one light and another dark), window control colors in all windows are changed to the same color, so window controls in one window become less visible or even invisible.

Workaround

You can disable "Allow web apps to override a theme (titlebar) color" in the app browser settings to prevent this issue.

Steps to Reproduce

0. Make sure that "Allow web apps to override a theme (titlebar) color" is enabled in the app browser settings.
1. Install two web apps to the same profile, one that has a light theme color (Twitter), and another that has a dark (GitHub).
2. Open the web app that has a light theme color (for example, Twitter on light mode).
3. You should notice that the window controls look fine.
4. Open another web app that has a dark theme color (for example, GitHub).
5. You should notice that the window controls in the first window have changed to white, making them almost invisible.

Additional Information

Screenshot

This happens because the system integration changes toolbar theme depending on the web app's theme color to make window controls and other icons visible. This code works fine when there is only one open web app. However, because the theme applies to all windows from the same profile, it causes this issue when more web apps are opened.

I don't think there is an easy way to fix this. There doesn't seem to be a way to change native window controls colors without changing the whole theme. It probably requires some modifications of the Firefox C++ code, but I don't know what exactly.

Affected Websites

• https://github.com/
• https://twitter.com/
• ...

Environment

• Operating system: Ubuntu 22.04
• System architecture: x64
• Desktop environment: GNOME
• Installation method: source
• PWAsForFirefox extension version: 2.5.0
• PWAsForFirefox native version: 2.5.0
• Firefox version: 112.0

[black7375]

The easiest way to solve is to use non-native theme. https://github.com/mozilla/gecko-dev/blob/master/browser/themes/linux/browser.css#L361-L396

[filips123]

Yeah, but non-native themes use custom window controls that may look out-of-place on some distros. I can probably add an option to let users choose if they want native or custom window controls, but I would still like to fix this issue eventually even when using native controls.