1701266 - Proton TitleBar color - Default Theme doesn't match to Windows accent color

Status: RESOLVED WONTFIX

(Firefox :: Toolbars and Customization, defect)

Description

[Serge]

Attachment: Theme.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0

Steps to reproduce:

EnableProtonUI
browser.proton.contextmenus.enabled
browser.proton.enabled
browser.proton.tabs.enabled
browser.proton.toolbar.enabled
browser.proton.urlbar.enabled

Go to Win10 settings>Personalization>Colors>select from Windows colors

Observe the color of the Firefox titlebar color

Actual results:

On Nigthly TitleBar color (with the default theme selected) doesn't match accent color selected by the Windows

Expected results:

Firefox should use Windows system accent color (When Firefox window is active).
This is true for the Release but not on Latest Nightly

Comment 1

[:Gijs (he/him)]

With Proton, the Default theme switches between Light and Dark based on the system settings. We've removed support for showing the Windows accent color.

Comment 2

[Serge]

This seems to be unexpected
Could you please double-check if this is the right decision?
Almost every well programmed application on Windows platform tolerates OS accent color.
This as also true for the competitor browsers.
What kind of profit of improvement to user experience this change will give?

Comment 3

[Serge]

Hi here,
Not sure if you are the right persons to ask (if not please hint who can give some more details).
Could you please give some more details on the background behind the decision of removing support for Windows accent color

The accent color itself is one of the most recognizable/visible customization features on Windows 10.
The majority of Software developers utilize it (at least as the default theme choice)
Other Browser competitors are also using it.
Accent color support was present at some point with Proton (when it received its new tabs style).

Color vise Proton is almost identical to the current Light theme.
This fact also puts a question why accent color support should be dropped from the Default Theme.

Maybe there was some misunderstanding with the decision of its removal was made.

Comment 4

[Marco Bonardo [:mak] (Away Apr 25 - May 5)]

I'm not the right person, I'm sorry. I don't think that technically there's reasons or requirements (like Microsoft guidelines) to use the accent color, especially when the app is setup to draw in the titlebar. There are a lot of apps on Windows that don't use it, just to make a few examples: Steam, Visual Studio Code, OneNote. Some of these are also made by Microsoft.

Comment 5

[Serge]

Not all examples provided are a not 100% relevant...
Steam - uses its separate skin system that doesn't have any connection with the OS accent at all
One Note - exclusively uses Purple as its accent color (like the mayorify of Office apps)
VS code - agree, it is hard to tell why is doesn't tolerate the accent color.

The key point is that Proton did support accent at some point, and it coexisted with remaining built-in themes.

The Titlebar Background color is one of the first things that is visible to user once the Browser starts.
This means that virtually every Windows 10 user that is aware of/uses the OS accent color and Default Firefox theme is affected by the change.
Ant if it worked before and stopped working now, in terms of user experience this is a drawback.
Are there any metrics that show the amount of users that potentially will be affected by this change (usage of accent color in Firefox)?

With all respect this does looks and sound like a Regression:

• the feature was present before and worked without any visual bugs
• after the bug 1686529 default theme is virtually the same as Light theme
• the feature was not interfering with either Light or Dart theme.

If the whole change was dictated by the new Design choice, then the more logical way would be to change the Light theme coloring, and leaving the existing Default theme as it is.
If there is an additional need to force users for the New Light Colors, then force enabling Light theme for them (still not the best solution)

Comment 6

[Tim Nguyen :ntim]

You could just make a Firefox theme if you don't like it: https://color.firefox.com/?theme=XQAAAAJyAQAAAAAAAABBKYhm849SCia6aSqEGccwS-xMDPsqvMQuvAF6DfFcVnIO2RlYPn7K96jxJl9euVMPIG3hXZanKHmO0SR6HAFypXPQodXI0IApXyo0vUL2bJ6TKo55agaySyLYVycfJRH5JWbW5mhasxmWu8vufdYBik_o42A2KoDCzaT56Bd6rOBwJgRAvXB0fdFkbgIbV8iw1NjTyaQNPYTpc0jo_tHq-a2R9pExRHQqLOaMwjpL_48SQ-GIQr_P35VJTKhJVPIbWMj_TJ1fJmfWYQlu9aX_6rYvZA

Comment 7

[Mark Straver]

I know this is already marked as WONTFIX but I do want to provide some feedback here after seeing this land in my nightly install.
Like quite a few people out there I use a light application theme with a dark accent color. Firefox now ignores the accent color and gives me a dark grey text on grey default, made worse by fading titles in the tabs buttons that has a severe lack of contrast in comparison as well as totally breaking with my O.S. UI.
IMHO this is a severe usability and UX regression that should be addressed.

Making a "theme" to work around it won't help if you regularly change the accent color (e.g. based on automatic color selection from the desktop background). You can't expect people to make a theme every time they change their color or desktop.

Comment 8

[Filippo]

Attachment: Active window title bar vs. inactive window title bar

Active window title bar compared to inactive title bar.
The only difference is a hardly distinguishable change in tab text color!
I don't really understand the rationale beneath this choice. Why?!
I think that this is an usability and UX regression that should be addressed.

Comment 9

[Filippo]

(In reply to Tim Nguyen :ntim from comment #6)

You could just make a Firefox theme if you don't like it: https://color.firefox.com/?theme=XQAAAAJyAQAAAAAAAABBKYhm849SCia6aSqEGccwS-xMDPsqvMQuvAF6DfFcVnIO2RlYPn7K96jxJl9euVMPIG3hXZanKHmO0SR6HAFypXPQodXI0IApXyo0vUL2bJ6TKo55agaySyLYVycfJRH5JWbW5mhasxmWu8vufdYBik_o42A2KoDCzaT56Bd6rOBwJgRAvXB0fdFkbgIbV8iw1NjTyaQNPYTpc0jo_tHq-a2R9pExRHQqLOaMwjpL_48SQ-GIQr_P35VJTKhJVPIbWMj_TJ1fJmfWYQlu9aX_6rYvZA

Can I make a custom theme that changes title bar color when window is not active?
Can I make a custom theme that uses Windows 10 accent color (that changes according to desktop background color)?

Comment 10

[Filippo]

(In reply to Serge from comment #5)

Not all examples provided are a not 100% relevant...
Steam - uses its separate skin system that doesn't have any connection with the OS accent at all
One Note - exclusively uses Purple as its accent color (like the mayorify of Office apps)
VS code - agree, it is hard to tell why is doesn't tolerate the accent color.

The key point is that Proton did support accent at some point, and it coexisted with remaining built-in themes.

The Titlebar Background color is one of the first things that is visible to user once the Browser starts.
This means that virtually every Windows 10 user that is aware of/uses the OS accent color and Default Firefox theme is affected by the change.
Ant if it worked before and stopped working now, in terms of user experience this is a drawback.
Are there any metrics that show the amount of users that potentially will be affected by this change (usage of accent color in Firefox)?

With all respect this does looks and sound like a Regression:

• the feature was present before and worked without any visual bugs
• after the bug 1686529 default theme is virtually the same as Light theme
• the feature was not interfering with either Light or Dart theme.

If the whole change was dictated by the new Design choice, then the more logical way would be to change the Light theme coloring, and leaving the existing Default theme as it is.
If there is an additional need to force users for the New Light Colors, then force enabling Light theme for them (still not the best solution)

You're right!

Comment 11

[Tim Nguyen :ntim]

(In reply to Filippo from comment #9)

(In reply to Tim Nguyen :ntim from comment #6)

You could just make a Firefox theme if you don't like it: https://color.firefox.com/?theme=XQAAAAJyAQAAAAAAAABBKYhm849SCia6aSqEGccwS-xMDPsqvMQuvAF6DfFcVnIO2RlYPn7K96jxJl9euVMPIG3hXZanKHmO0SR6HAFypXPQodXI0IApXyo0vUL2bJ6TKo55agaySyLYVycfJRH5JWbW5mhasxmWu8vufdYBik_o42A2KoDCzaT56Bd6rOBwJgRAvXB0fdFkbgIbV8iw1NjTyaQNPYTpc0jo_tHq-a2R9pExRHQqLOaMwjpL_48SQ-GIQr_P35VJTKhJVPIbWMj_TJ1fJmfWYQlu9aX_6rYvZA

Can I make a custom theme that changes title bar color when window is not active?

Yes. There's a frame inactive property in the "Advanced colors" section of the editor in the link above.

Can I make a custom theme that uses Windows 10 accent color (that changes according to desktop background color)?

There might be an possible extension/dynamic theme based solution, but good question. This is a valid use case.

Comment 12

[shippage]

The decision of this kind of confuses me, mainly because it is inconsistent across systems.

On Linux, the accent color is still supported on the latest Nightly, and the GTK theme support is wonderful. If anything, I'd expect this support to be even better on Windows, but the decision here is to remove it?

I'm certainly not suggesting to remove this System Theme support on Linux, as I love it and think it works great, but I am wondering why this feature is well supported on Linux, yet purposely removed on Windows.

Comment 13

[pieter kristensen]

Seems to me that "won't fix" is not smart.
Windows users of Firefox will expect their client side tool/tab bar decoration to be coloured with the accent colour. It always has been. They will perhaps not feel at home in Firefox 89. I don't expect most of those users to make a custom firefox colour theme.
I think the obvious choice for those people is to make the switch to Edge of perhaps Chrome. Both colourize the bar in the way they expect.
If "won't fix" is a deliberate choice, why does the tab bar colourize itself correctly on my KDE box?
This feels unfinished to me.

Comment 14

[pieter kristensen]

To me it doesn't feel logically.
To be honest, it feels unfinished.
Firefox has always colourized the client side tab/toolbar. And suddenly doesn't any more in Windows.
If I were an average Windows user, and I would feel not at home in Firefox because of this, I would probably NOT create my own Firefox colour theme. The more obvious choice is to look at Edge or Chrome. Both behave in the expected way.
To me this feels unfinished.

Comment 16

[Bruce Jerrick]

I too have to protest this intentional change. The de facto Light theme for the title bar has very poor visibility regarding separation of tabs, etc. It isn't a question of the philosophy of theming, it's a matter of usability.

And there is an inconsistency amongst Windows versions -- the bug does NOT occur under Windows 8.1 .

Comment 17

[hiktaka]

I'm currently disabling Proton altogether with 89.0. The 'forced' light theme has poor separation and readability. On 88.0.1 I enjoyed proton by enabling it manually because the System Theme still applied on Title Bar.

Comment 18

[Yoskaldyr]

Totally agreed with hiktaka. FF88 with manually enabled light theme looks great and similar to the default windows 10 theme. But ff89 light theme looks like alien software from other OS.

Comment 19

[Jay]

I just got this update, and I'm also seeing this bug. I have custom higher contrast title bar colors for active/inactive windows configured in Windows, and Firefox 89 is not respecting those colors even though the "System Theme" is enabled which says it "follows the operating system settings for buttons, menus, and windows." This is an accessibility concern and I should not be required to set up a custom theme to handle this when I have already set it up in Windows.

Can this be reopened, or should I create a clone?

Comment 20

[Jon E]

Intentional or not, I too consider it a functional regression.

Comment 21

[citay]

I got the update to Firefox 89 today, and after looking at all sorts of ways to fix it, i'm a bit horrified by this decision after finding this closed bug report. I already had several instances today where i wasn't sure if Firefox was the active window.

I know there are other examples like game launchers that don't abide by the rules, but i don't have any problem with that, i start those, start a game from within, leave the game, and close them.

With Firefox, it's a tool i often switch back and forth from, as a small window, as a big window, several programs overlapping and so on, alt-tabbing back and forth all the time. It's essential to know which is the active window!

I haven't found a theme that circumvents this flaw yet. Having read this report, i doubt there is any. The only way seems to be "browser.tabs.drawInTitlebar=false", but that eats into the usable website space vertically. I hate to be the guy to moan "i want the old way back", but i want the old way back.

Comment 22

[Yoskaldyr]

citay, all comments about this bug are ignored during 2 months. We stuck with this "modern" design from now.

Comment 23

[u686237]

The major problem with this ignoring of the Windows theme/accent color is mainly a functional one. Because with Firefox 89 both the light and dark theme (and in the Alpenglow theme as well) show the same title bar/ tab bar color wether the window is active or inactive. This way it's impossible for the user to see if the Firefox window is the active one or not, especially when multiple Firefox windows are open. Not knowing which window is the active windows is a major flaw, because users can't see which windows receives keybord or mouse input commands (like text input or shortcut commands STRG+V for example.

Comment 24

[u686237]

Attachment: FF-88.0.1-Active.png

This is an active Firefox 88.0.1 window with Windows accent color. You can tell that it is active by the dark window title/tab bar color.

Comment 25

[u686237]

Comment on attachment 9224565 [details]
FF-88.0.1-Active.png

This is an active Firefox 88.0.1 window with Windows accent color. You can tell that it is active by the dark window title/tab bar color.

Comment 26

[u686237]

Attachment: FF-88.0.1-Inactive.png

This is an inactive Firefox 88.0.1 window with Windows accent color. You can tell that it is inactive by the almost white window title/tab bar color.

Comment 27

[u686237]

Attachment: FF-89-Active.png

This is an active Firefox 89.0 window with Windows accent color. You can NOT tell that it is active, beause the title bar / tab bar color is white.

Comment 28

[u686237]

Attachment: FF-89-Inactive.png

This is an inactive Firefox 89.0 window with Windows accent color. You can NOT tell that it is inactive, beause the title bar / tab bar color is white, the same color as the active window.

Comment 29

[u686237]

Those four screenshot show that ignoring the Windows accent color is a major flaw, because it ignores an inportant usabiluty function of the Windows operating system (and other operating systems as well): Different window title bar colors indicate with a lot of visual clarity if a window is active (receives keyboard and mouse commands) or inactive (does not receive keyboard and mouse commands).

Firefox 89.0 with the Proton design ignores that important activity indicator. Firefox 88.0.1 was the last version to respect that activity indicator.

This can lead to a lot of unwanted user interaction:

• closing the wrong windows by hitting ALT+F4 (or other unwanted actions with other keyboard shortcuts)
• pasting in the wrong window by hitting STRG+V
• typing some (private or important) in the wrong window
• and many more unwanted things

Comment 30

[u686237]

If this is an unwanted bug, then PLEASE, resolve it as quickly as possible.
However, if this is intentional, then please reconsider your desicions, because this desicion has many disadvantages.

(It's decisions like these that make users migrate to other browsers. No wonder that Mozilla Foundation is in hard times... mainly because of flawed decisions like this one.)

Comment 31

[citay]

Well put, Riban. But apparently you have to voice your feedback when something is first tested, not when it's released to the general public. Because by that time, Mozilla puts the blinders on. The decision was reaffirmed amongst themselves long ago and it will stand. Even when it has such a glaring usability flaw that you begin to search for ways of disabling it within 10 minutes of use.

And now it's time to turn this feedback into (advocacy), (metoo).

Comment 32

[u686237]

My hope is that this is an easy fix, because they only need to change the built-in theme files in such a way that the title bar / tab bar respects the Windows accent color, just like Firefox 88.0.1 does it.
I don't plead for a total rework of the new Proton design, just this acent color thing.

Comment 33

[u686237]

A workaround would be to edit userChrome.css for the following design elements:

Active Firefox window:

• active tab font color
• active tab background color
• inactive tab font color
• inactive tab background color (i.e. tab bar background color) <- in our case here the active windows accent color
• color of other design elements in the tab bar like "New Tab Button", "Right/Left scroll arrow", Windows buttons (minimize, close, maximise)

Inactive Firefox window:

• active tab font color
• active tab background color
• inactive tab font color
• inactive tab background color (i.e. tab bar background color) <- in our case here the inactive windows accent color
• color of other design elements in the tab bar like "New Tab Button", "Right/Left scroll arrow", Windows buttons (minimize, close, maximise)

Comment 34

[lovis1024]

(In reply to Riban from comment #33)

A workaround would be to edit userChrome.css for the following design elements:

Active Firefox window:

• active tab font color
• active tab background color
• inactive tab font color
• inactive tab background color (i.e. tab bar background color) <- in our case here the active windows accent color
• color of other design elements in the tab bar like "New Tab Button", "Right/Left scroll arrow", Windows buttons (minimize, close, maximise)

Inactive Firefox window:

• active tab font color
• active tab background color
• inactive tab font color
• inactive tab background color (i.e. tab bar background color) <- in our case here the inactive windows accent color
• color of other design elements in the tab bar like "New Tab Button", "Right/Left scroll arrow", Windows buttons (minimize, close, maximise)

would you mind sharing the css code? Thank you very much!

Comment 35

[XTT]

This is ridiculous, why remove and actual useful feature like this? All of my other software respect my title bar colour, but suddenly firefox doesn't? Both the light and the dark theme hurt my eyes, they are awful. And no, I don't want to use a custom theme. I wish firefox would again use my windows colons instead of this.

Comment 36

[Asif Youssuff]

(In reply to Riban from comment #29)

Those four screenshot show that ignoring the Windows accent color is a major flaw, because it ignores an inportant usabiluty function of the Windows operating system (and other operating systems as well): Different window title bar colors indicate with a lot of visual clarity if a window is active (receives keyboard and mouse commands) or inactive (does not receive keyboard and mouse commands).

FYI, this issue is filed as bug 1704131.

Comment 37

[Yoskaldyr]

(In reply to Asif Youssuff from comment #36)

(In reply to Riban from comment #29)

Those four screenshot show that ignoring the Windows accent color is a major flaw, because it ignores an inportant usabiluty function of the Windows operating system (and other operating systems as well): Different window title bar colors indicate with a lot of visual clarity if a window is active (receives keyboard and mouse commands) or inactive (does not receive keyboard and mouse commands).

FYI, this issue is filed as bug 1704131.

And status if this bug Wontfix.
LOL.

As I said before. We stuck with this "modern" unusable design.

Comment 38

[citay]

So far, you can still disable it by setting browser.proton.enabled = false in about:config (there's also a handful of other Proton settings in there).
But there might come a day when they make it Proton-only.

Comment 39

[Mark Straver]

As someone with quite a long history in UI design I just want to add the following thoughts:

• UI expectance is that the active window has a uniform, clear, OS-global visual state. This has been a standard convention since the earliest versions of GUIs.
• Branding or branding design should never break usability of software. You've taken the "paint our own" approach too far here.
• It's fine to make an application look non-standard if you must, but you must keep the standard conventions for user interaction intact.

Not adhering to those simple rules means you are severely impacting usability (to say nothing about keeping the UI intuitive). That is a matter of fact, not opinion.

Comment 40

[u686237]

(In reply to lovis1024 from comment #34)

(In reply to Riban from comment #33)

A workaround would be to edit userChrome.css for the following design elements:

Active Firefox window:

• active tab font color
• active tab background color
• inactive tab font color
• inactive tab background color (i.e. tab bar background color) <- in our case here the active windows accent color
• color of other design elements in the tab bar like "New Tab Button", "Right/Left scroll arrow", Windows buttons (minimize, close, maximise)

Inactive Firefox window:

• active tab font color
• active tab background color
• inactive tab font color
• inactive tab background color (i.e. tab bar background color) <- in our case here the inactive windows accent color
• color of other design elements in the tab bar like "New Tab Button", "Right/Left scroll arrow", Windows buttons (minimize, close, maximise)

would you mind sharing the css code? Thank you very much!

I am not a CSS or userChrome expert, so this may take a while.
Here is a great Firefox Addon directly from Mozilla to build and share Firefox Themes: https://color.firefox.com

Comment 41

[Filippo]

(In reply to Riban from comment #40)

(In reply to lovis1024 from comment #34)

(In reply to Riban from comment #33)

A workaround would be to edit userChrome.css for the following design elements:

Active Firefox window:

• active tab font color
• active tab background color
• inactive tab font color
• inactive tab background color (i.e. tab bar background color) <- in our case here the active windows accent color
• color of other design elements in the tab bar like "New Tab Button", "Right/Left scroll arrow", Windows buttons (minimize, close, maximise)

Inactive Firefox window:

• active tab font color
• active tab background color
• inactive tab font color
• inactive tab background color (i.e. tab bar background color) <- in our case here the inactive windows accent color
• color of other design elements in the tab bar like "New Tab Button", "Right/Left scroll arrow", Windows buttons (minimize, close, maximise)

would you mind sharing the css code? Thank you very much!

I am not a CSS or userChrome expert, so this may take a while.
Here is a great Firefox Addon directly from Mozilla to build and share Firefox Themes: https://color.firefox.com

This Addon can't replace old Firefox behavior.
Windows 10, on my PC, is configured with an accent color that changes accordingly to desktop background, that changes automatically every 30 minutes.
With Photon theme, Firefox title bar changed color the same way. So I had a clear difference between active and inactive title bar color, with the addition that active window title bar changed every 30 minutes. Forget to do this with the Addon you mentioned.
Proton theme is LESS USABLE, has POOR ICON QUALITY and STRIPPED AWAY URLBAR ACTION BUTTONS, that allowed me, for example, to pin and unpin a tab with a single click.
I can't find a single valid reason to do this change. It is only because you want to make Firefox prettier? OK, you can do it, but, please, don't remove useful features!
And, the next time you want change icons, please hire a better graphic designer.

Comment 42

[u686237]

I need help from theming and userChrome.css experts around here.
I have found the appropriate values (see below), but I am not able to craft a userChrome.css or a theme from it.

"frame"
defines the color of the header area background, displayed in the part of the header not covered or visible through the images specified in "theme_frame" and "additional_backgrounds"
(reference: https://developer.mozilla.org/de/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme)

"frame_inactive"
defines the color of the header area background when the browser window is inactive, displayed in the part of the header not covered or visible through the images specified in "theme_frame" and "additional_backgrounds"
(reference: https://developer.mozilla.org/de/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme)

"-moz-win-accentcolor"
By using -moz-win-accentcolor as a color, whenever Windows accent color changes, Firefox's changes too.
(reference: https://www.reddit.com/r/FirefoxCSS/comments/7kd7kj/change_tab_accent_color_to_windows_system_accent)

If this could be used to make a userChrome.css from it, then the browser would switch between active and inactive colors. This would also help those people who regularly or automatically change their Windows accent color (in short intervals).

Comment 43

[marczellm]

Here's the userChrome way to access the accent color, but it doesn't seem to work any more in Proton:

https://www.reddit.com/r/FirefoxCSS/comments/7kd7kj/change_tab_accent_color_to_windows_system_accent/

even though it is even documented here:

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

Dear developers, could we at least get this customization option back?

Comment 44

[u686237]

I managed to get part of the solution.

I have created a theme (see code below) with the Mozilla theme generator (https://color.firefox.com). In this theme I have set the alpha value of the "frame_inactive" color to "0" which equals complete transparency. The result of that code below is that active windows have the custom color that I have set in the "frame" variable, inactive windows get the standard white. So this mimics the good old active/inactive behavior of Firefox 88.0.1 (see my 4 screenshots above).

The only problem left that needs to be resolved is that the tab bar buttons are also white in the white inactive window and therefore impossible to see. Does someone know a trick to color the buttons in the tab bar when the window is inactive?

Theme Code

{
"manifest_version": 2,
"version": "1.0",
"name": "Test",
"theme": {
"images": {},
"properties": {},
"colors": {
"toolbar": "rgb(249, 249, 250)",
"toolbar_text": "rgb(0, 0, 0)",
"frame": "rgb(89, 92, 103)",
"tab_background_text": "rgb(255, 255, 255)",
"toolbar_field": "rgb(255, 255, 255)",
"toolbar_field_text": "rgb(0, 0, 0)",
"tab_line": "rgb(127, 127, 127)",
"popup": "rgb(255, 255, 255)",
"popup_text": "rgb(0, 0, 0)",
"frame_inactive": "rgba(34, 25, 77, 0)",
"tab_loading": "rgb(127, 127, 127)"
}
}
}

Comment 45

[u686237]

Addition to my previous comment:
The tab title text of inactive windows needs to be colored too, because it is also white on white.

Comment 46

[u686237]

Attachment: Firefox 89.0 active window tab bar color

Comment 47

[u686237]

Attachment: Firefox 89.0 inactive window tab bar color

Tab bar buttons and tab titles of inactive windows are still white and therefore impossible to see.

Comment 48

[Tudor Florea]

(In reply to :Gijs (he/him) from comment #1)

With Proton, the Default theme switches between Light and Dark based on the system settings. We've removed support for showing the Windows accent color.

This is an awkward decision and on itself is enough to deter us from using Firefox (anymore).
Firefox does not seem to respond our pledge so I can't do much about this.
However The theme name as description is simply incorrect:
"System theme".
"Follow the operating system setting for buttons, menus, and windows."
My suggestion is to rename the theme and the description to match whatever you're trying to achieve.
This would prevent me ( as user ) having a hard why the tweaking OS theme in vain.

Comment 49

[Vladislav]

I feel your pain, that's pretty annoing issue.
The way devs close major proton usability issues with "wontfix/invalid" makes me think that it is over with Firefox.

users: last update made browser unusable, we have created a bug report with details, screenshots, descritpions, usecases, opinions

no word more, RESOLVED WONTFIX
¯_(ツ)_/¯

Comment 50

[u686237]

So could somebody figure out how to color the toolbar icons when a window is inactive? I had no success.

I like the new Proton design except for the lack of different active/inactive window accent colors and the fact that it's not possible to add/remove URL bar icons at the right inside of the urlbar/address field.

Comment 51

[pieter kristensen]

My answer to comment 50
I dare to say that ALL who have contributed to this bug did that because they were concerned about the fate of their much beloved favorite browser Firefox.
All those people tried to explain clearer and clearer what is the matter, what this problem means for Windows Firefox users (most users I guess) and express their worries about the future of this great browser.
It is clear that all those worries are ignored.
My answer to your question, Riban, would be that by far the easiest solution to your question is to start looking for a Firefox alternative. And that makes me really sad!

Comment 52

[Dan Cojocaru]

This is a major regression and, combined with other blunders of this new look, makes Firefox no longer enjoyable.

The proposed workarounds are insufficient. The color must be manually chosen, and a new theme must be created each time the accent color changes. For people who have multiple wallpapers and for whom the accent color changes based on the wallpaper, this is not a solution.

Furthermore, creating a custom theme doesn't allow (as far as I know) for it to automatically change between dark and light mode when the system changes.

And there's also the poor visibility of which window is focused and which one isn't.

Offtopic but part of the new design is the lack of separators between tabs which makes it hard to distinguish at a glance which tab is which.

Comment 53

[Filippo]

(In reply to Dan Cojocaru from comment #52)

This is a major regression and, combined with other blunders of this new look, makes Firefox no longer enjoyable.

The proposed workarounds are insufficient. The color must be manually chosen, and a new theme must be created each time the accent color changes. For people who have multiple wallpapers and for whom the accent color changes based on the wallpaper, this is not a solution.

Furthermore, creating a custom theme doesn't allow (as far as I know) for it to automatically change between dark and light mode when the system changes.

And there's also the poor visibility of which window is focused and which one isn't.

Offtopic but part of the new design is the lack of separators between tabs which makes it hard to distinguish at a glance which tab is which.

You're right!
I found that there is a similar change request on idea.mozilla.org. You can find it (and vote it) on https://mozilla.crowdicity.com/post/719939

Comment 54

[Jay]

Another bug report has been opened for this issue, please go and vote on it to show your support: https://bugzilla.mozilla.org/show_bug.cgi?id=1707669

To vote, click Edit Bug (top right) > click Vote (in the details panel) > check the box on the highlighted line > click Change My Votes

Comment 56

[u686237]

In defence of Mozilla, though, I have to say that many Microsoft apps that ship out of the box with Windows 10 don't respect accent color either: Weather, Microsoft Store and many others, especially the so called "Modern" or "UWP" apps, just to name a few. Other browsers like Opera, Brave and even Microsoft's own Edge come with their own themes that don't respect Windows accent color. No matter whether they are based on Chromium or other codebases. Mozilla now is in line with those other browsers. So complaints about this need to hit all those browsers and apps from other categories.
In my eyes this somehow indicates that Window accent color is not a main functionality / priority any more in Microsoft's own opinion specifically and in app development in general, otherwise they would maintain more consistency. So maybe users have to go with the flow (whether they like it or not) or pressure Microsoft to focus more on UI consistency (like Apple does it with their strict UI design guidelines).

So how about this, Mozilla: If you abandon the Windows accent color and go with your own themes, fine. But please please please improve your Firefox dark and light themes in such a way that active windows can clearly be distinguished from inactive windows. This helps to avoid unwanted inputs into the wrong browser windows.

Comment 58

[Mykola]

This is a direct violation of Windows design guidelines and should be reopened:

Do make it obvious when your window is active or inactive. At a minimum, change the color of the text, icons, and buttons in your title bar.

Source: https://docs.microsoft.com/en-us/windows/uwp/design/shell/title-bar

Comment 60

[Klaus Reinfeld]

(In reply to Riban from comment #56)

Other browsers like Opera, Brave and even Microsoft's own Edge come with their own themes that don't respect Windows accent color.

Chrome and Edge are respecting the Windows accent color - that they do that even correctly - for active and inactive Windows.
On my system Firefox is the only application with that strange behavior and that unpleasant gray title-bars.

That means: please fix this!

For the moment I have disabled proton because of this, but I'm sure that option will be removed in future...

Thanks!

Comment 61

[Tudor Florea]

(In reply to Klaus Reinfeld from comment #60)
As this has been done on purpose, any advocacy to reopen this bug will be marked as such (and then ignored). Any comment here (including this one, sorry!) will just eat up valuable time of people that otherwise does a great job fixing Firefox.

Rather than commenting here, use this link: https://mozilla.crowdicity.com/post/719939 to raise awareness.

Comment 62

[marczellm]

Thank you for launching the Crowdicity / Ideas website. So far there was no visible way to give this kind of feedback.

Comment 63

[copperlynx]

I was trying to change the layout of the tool bar/navigation bar and went to:

View->Toolbars->Customize Toolbar...

This brought up a new window to customize firefox and at the bottom left there is a checkbox that says "Title Bar". I checked that to see what it did and the accent color came back for the title bar. Active and inactive windows seem to be working as before too.

Comment 64

[citay]

(In reply to copperlynx from comment #63)

This brought up a new window to customize firefox and at the bottom left there is a checkbox that says "Title Bar". I checked that to see what it did and the accent color came back for the title bar. Active and inactive windows seem to be working as before too.

No, that adds a conventional title bar on top, stealing yet more precious vertical space than the Proton design already does. If you simply set "browser.proton.enabled" to false in about:config, without an extra title bar, you will see that you a) have the least vertical space taken up, and b) have proper indication of active/inactive window.

Comment 67

[marczellm]

I believe some of you might be interested in a userChrome based solution. Unfortunately you have to hardcode your accent color, since the -moz-win-accentcolor value does not seem to be supported any more.

@-moz-document url(chrome://browser/content/browser.xhtml) {
    #TabsToolbar {
	    background: #ffb900;
    }

    #TabsToolbar:-moz-window-inactive {
	    background: inherit;
    }
}

Comment 68

[Sören Hentzschel]

Unfortunately you have to hardcode your accent color, since the -moz-win-accentcolor value does not seem to be supported any more

It's -moz-accent-color now.

Comment 69

[u686237]

I have tried it using the code that Sören Hentzschel mentioned and it works:

#TabsToolbar {
	background: -moz-accent-color !important;
}
#TabsToolbar:-moz-window-inactive {
	background: inherit !important;
}

In addition to that code above I need to inherit the Windows Accent Text color for active and inactive Windows.
Is there something like -moz-accent-color-text ?

And I also need to change the button's colors in the active and inactive tab bar (like the New Tab "+" button and the Windows buttons "close", "minimize" and "maximize").

Comment 70

[Sören Hentzschel]

Is there something like -moz-accent-color-text ?

You could try -moz-accent-color-foreground (I don't have Windows so I can't test if it behaves like expected).

Comment 71

[u686237]

#TabsToolbar:-moz-window-inactive {
	background: inherit !important; }

For this piece of code however I need to grab the Inactive Windows Accent Color.
So inherit needs to be replaced with something like -moz-accent-color-inactive. Is there such a thing?

Comment 72

[u686237]

(In reply to Sören Hentzschel from comment #70)

Is there something like -moz-accent-color-text ?

You could try -moz-accent-color-foreground (I don't have Windows so I can't test if it behaves like expected).

That does the trick! Thanks!

Comment 73

[Serge]

Hi here,
so could someone please post the full set of CSS to restore accent color for the tabbar?

Comment 74

[u686237]

userChrome.css code that already works for the custom Windows Accent color theme

Tab bar background color of active Firefox window is taken from the active Windows Accent color:

#TabsToolbar {
	background: -moz-accent-color !important; }

Title/Text color of inactive tabs in active Firefox window is taken from the Windows Title/Text color of active windows:

.tabbrowser-tab:not([selected]) {
	color: -moz-accent-color-foreground !important; }

Missing userChrome.css code to complete the custom Windows Accent color theme

• Color of the buttons in the Tab Bar of active Firefox window that is taken from the active Windows Button color
• Tab Bar background color of inactive Firefox window that is taken from the inactive Windows Accent color
• Color of the buttons in the Tab Bar of inactive Firefox window that is taken from the inactive Windows Button color
• Title/Text color of inactive tabs in inactive Firefox window that is taken from the Windows Title/Text color of inactive windows

Comment 75

[u686237]

Attention
Be careful to pay close attention to active and inactive elements in the four missing bullet points I wrote in my comment 74 above. It's confusing, I know.

Comment 76

[insider32]

Attachment: Mozilla Firefox With Menu Bar Fixes

If you're weird like me, you have Tree Style Tab and disable the horizontal tabs. I end up enabling the menu bar which looks terrible and is confusing in the new Firefox as people have mentioned.

Attached screenshot is what Firefox looks like with these userChrome.css fixes:

/* Show active colors on main menu bar */
#toolbar-menubar {
	background: -moz-accent-color !important;
	color: white;
}
#toolbar-menubar:-moz-window-inactive {
	background: -moz-accent-color-foreground !important;
}

/* Fix weird menu bar positioning */
#main-menubar {
	margin-top: 4px !important;
}

Comment 77

[Gauthzilla]

In the petition against this bug due to the new proton design (https://mozilla.crowdicity.com/post/719939 => do not hesitate to protest with us!)
someone posted a (imho) better workaround: just disabling new proton design through Firefox config:
(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.
(2) In the search box in the page, type or paste browser.proton.enabled and pause while the list is filtered
(3) Double-click the preference to switch between true (new UI) and false (old UI)

This is much easier than playing with CSS ;-)

@Mozilla: please please please fix this issue! Additionally to the bug aspect, this is an (universal) usability regression for a (questionable) design improvement... :-(

Comment 78

[u686237]

(In reply to insider32 from comment #76)

/* Fix weird menu bar positioning */
#main-menubar {
	margin-top: 4px !important;
}

Great improvement. Just a quick addition to it:
If a user enables the menu bar only temporarily/occasionally by pressing "ALT" on the keyboard, then the appropriate margin-top is 8px.

Comment 79

[u686237]

So, assembled here is a huge portion of the userChrome.css code for the Menubar and Tabbar color that adapt to custom/user set Windows Accent color. Please note the discription of the particular code segments, because there are some minor things missing for which I need your help. Further below are comments about some code for other elements that are still missing.

1. Menubar background color of active Firefox windows with Windows Accent color of active windows:

#toolbar-menubar {
	background: -moz-accent-color !important; }

2. Menubar background color of inactive Firefox windows with Windows Accent color of inactive windows. The problem here is that the color is hard coded. Is there something like -moz-accent-color-inactive which would dynamically pull the Windows Accent color of inactive windows?

#toolbar-menubar:-moz-window-inactive {
	background: #c7c7c7 !important; }

3. Menubar text color of active Firefox windows with Windows Accent color of active windows:

#toolbar-menubar {
	color: -moz-accent-color-foreground !important; }

4. Menubar text color of inactive Firefox windows with Windows Accent color of inactive windows. The problem here is that the color is hard coded. Is there something like -moz-accent-color-foreground-inactive which would dynamically pull the Windows text color of inactive windows?

#toolbar-menubar:-moz-window-inactive {
	color: #000000 !important; }

5. Tabbar background color of active Firefox windows with Windows Accent color of active windows:

#TabsToolbar {
	background: -moz-accent-color !important; }

6. Tabbar background color of inactive Firefox windows with Windows Accent color of inactive windows. The problem here is that the color is hard coded. Is there something like -moz-accent-color-inactive which would dynamically pull the Windows Accent color of inactive windows?

#TabsToolbar:-moz-window-inactive {
	background: #c7c7c7 !important; }

7. Color of the window buttons (minimize, maximize, close) (not the tab text color) in the Tabbar of active Firefox windows with Windows Accent color of active windows:

#TabsToolbar {
	color: -moz-accent-color-foreground !important; }

8. Color of the window buttons (minimize, maximize, close) (not the tab text color) in the Tabbar of inactive Firefox windows with Windows Accent color of inactive windows. The problem here is that the color is hard coded. Is there something like -moz-accent-color-foreground-inactive which would dynamically pull the Windows Accent color of inactive windows?

#TabsToolbar:-moz-window-inactive {
	color: #000000 !important; }

Comment 80

[u686237]

Attachment: Missing code

Elements for which the userChrome code is still missing:

• Color for the buttons and their background (normal and mouseover/hover) marked red in the picture in active and inactive Firefox windows.

Comment 81

[u686237]

Also missing

• Color of the text of inactive tabs in inactive Firefox windows taken from the Windows inactive window title text color.

Comment 82

[Sören Hentzschel]

Every comment in this ticket causes e-mails to a lot of people who want to get notificated if / once there is progress or an important update to share. So please don't add more comments about your customizations, there are other platforms for that, like https://www.reddit.com/r/FirefoxCSS/. Thanks.

Comment 83

[Meow Cat]

For a reason unknown to mankind, every once a while a genius appears at Mozilla insisting to impose this change, it's not the first time we're asked to hack through CSS for a feature in fact someone can simply add as an option ( dark / light / "real system" theme instead of binary one ) to solve the issue created out of thin air.

There are quite simple explanations above why this is a UX crime and masterwork of a highly opinionated UI/UX exempt genius but you leave no room for such reasoning either.

So if you really insist on this, please at least keep option to disable Proton forever ( I didn't like it either but it's my subjective taste anyway )

Comment 85

[aafn]

Sorry to notify then a lot of people here, but since many expressed concerns, here is a complement to what Riban has collected in Comment 79, replacing some of it, to help for matching again Windows colors (it does for me), and to keep all in one place

https://discourse.mozilla.org/t/so-now-we-can-not-even-turn-off-proton/83108/28?u=aafn

Comment 86

[TomK]

This worked in FF90 and FF91, so why was that fixed reverted and the old bug re-introduced in FF92

Comment 89

[Albert]

this bug happened just now in FF 92 , why is that report closed??

Comment 90

[Mykola]

(In reply to :Gijs (back Sept 20; he/him) from comment #1)

With Proton, the Default theme switches between Light and Dark based on the system settings. We've removed support for showing the Windows accent color.

So how we should distinguish between active and inactive Firefox window without accent color? Current defaults are horrible, because colors are almost the same.

Comment 91

[u686237]

The code from aafn's post https://bugzilla.mozilla.org/show_bug.cgi?id=1701266#c85 still works for me in FF 92.

Comment 92

[u686237]

See my following posts with screenshots of different browsers and some native Windows 10 apps in active and inactive window states. They all look more or less indistinguishable in active and inactive state regarding their accent color. This is even worse with Windows 11 where even the Explorer and "traditional" native included Win32-Apps are not really distinguishable by their accent colors any more. Same with macOS these days. So Mozilla's FF is in very good company and should not be the only app to receive all the negative feedback.
Maybe this is the general direction of todays "modern" user interfaces...

Comment 93

[u686237]

Attachment: Brave bright active

Brave bright active

Comment 94

[u686237]

Attachment: Brave bright inactive

Brave bright inactive

Comment 95

[u686237]

Attachment: Brave dark active

Brave dark active

Comment 96

[u686237]

Attachment: Brave dark inactive

Brave dark inactive

Comment 97

[u686237]

Attachment: Calc active

Calc active

Comment 98

[u686237]

Attachment: Calc inactive

Calc inactive

Comment 99

[u686237]

Attachment: Edge active

Edge active

Comment 100

[u686237]

Attachment: Edge inactive

Edge inactive

Comment 101

[u686237]

Attachment: Opera bright active

Opera bright active

Comment 102

[u686237]

Attachment: Opera bright inactive

Opera bright inactive

Comment 103

[u686237]

Attachment: Opera dark active

Opera dark active

Comment 104

[u686237]

Attachment: Opera dark inactive

Opera dark inactive

Comment 105

[u686237]

Attachment: Weather active

Weather active

Comment 106

[u686237]

Attachment: Weather inactive

Weather inactive

Comment 107

[pieter kristensen]

I must admit that that was a thought of mine from the very first beginning of this bug:
perhaps there is a reason why Mozilla moves to less distinction between active an inactive windowborders on the Windows platform....
That reason could be that Microsoft is moving away from it.
Things like that can happen.
But if this is the case, and that could very well be, then the amazing thing is the "resolved wontfix" approach from mozilla. I can not imagine that these people don't know how many emotions changes in the UI can bring with the users of a program.
If they would have simply and politely explained what had brought them to this change there would have been spared a lot of time and emotions.
But then again:
I don't know if there is a good explanation to this change and there could be all sorts of reasons why nobody at Mozilla could explain this to the concerned users. All of the reasons I can imagine don't make Mozilla look prettier.

Comment 108

[Mykola]

@Riban The fact, that others make stupid mistakes, does not mean, that Mozilla should repeat them.
At least the design guidelines for Windows are written with usability in mind:

Do make it obvious when your window is active or inactive. At a minimum, change the color of the text, icons, and buttons in your title bar.
Source: https://docs.microsoft.com/en-us/windows/uwp/design/shell/title-bar
Apple guidelines have similar statement.

Comment 109

[u686237]

I don't like this new design "trend" either and I, too, would prefer active and inactive windows to be more distinguishable. That's why I am advocating here. But how imperative could Microsoft's guidelines possibly be to other app developers when even Microsoft itself does not comply with them? I mean look at my screenshots of Microsoft's own apps: Inactive and active have ever so slightly different title bar text colors, but this is so subtle that it almost can't be seen at all. And this gets worse with Windows 11 when Microsoft only uses different levels of transparency to distinguish between active and inactive windows.
I really wish Mozilla would comply more to Microsoft's design guidelines than Microsoft does itself.

Comment 110

[Emanuele Alimonda]

Riban, I believe (some, but not all of?) your screenshots were taken with the setting "Show accent color on the following surfaces: Title bars and window borders" turned off in Settings -> Personalization -> Colors. When that's disabled, applications have little contrast between their focused and unfocused windows.

The problem here is that Firefox disregards that setting while other applications (Edge for example) follow it. Many UWP applications don't have strong enough visual cues to distinguish focused and unfocused windows, but are still better than Firefox, in that they have elements that become translucent when focused (in your screenshot, Calc is shown against a gray background, so that might not be very noticeable).

For a fair comparison, since this issue is about usability and ability to distinguish focused windows, a comparison should be done with that setting enabled, since it's fair to assume that anyone that is bothered by this on Windows has that turned on.

Luckily, it's still currently possible to enable the native titlebar in Firefox, and when it's enabled, it becomes distinguishable. Else it'd be really difficult to use.

Comment 111

[u686237]

So I activated "Show accent color on the following surfaces: Title bars and window borders" in "Settings -> Personalization -> Colors" for a more fair comparison, as suggested. The following screenshots show the results:

• Edge indeed is now distinguishable just like Windows Explorer and other non-themed Win 32 apps.
• Themed Win 32 apps like Firefox, Opera, Brave etc. are still almost undistinguishable (just like in my screenshots above, therefore no repetitive/redundant screenshots of this in the following posts).
• UWP apps like Weather and Calc are almost undistinguishable, too.
• Calc (and some other UWP apps) is a little bit more distinguishable when transparency in "Settings -> Personalization -> Colors" is activated.

But still it is bad UI design when applications depend on transparency to be distinguishable between active and inactive state. And it is even worse (aka unacceptable) when the distinguishability of transparent apps depends on the contrast of the desktop background or the contrast of the application windows and their content behind the foreground app (like a browser with a dark or white website behind the transparent app in the foreground).

This totally different behaviour of apps still a mess that confuses users. A lot of unification of this is needed.

Comment 112

[u686237]

Attachment: Calc active transparency off

Calc active transparency off

Comment 113

[u686237]

Attachment: Calc active transparency on

Calc active transparency on

Comment 114

[u686237]

Attachment: Calc inactive transparency off

Calc inactive transparency off

Comment 115

[u686237]

Attachment: Calc inactive transparency on

Calc inactive transparency on

Comment 116

[u686237]

Attachment: Edge active

Edge active

Comment 117

[u686237]

Attachment: Edge inactive

Edge inactive

Comment 118

[u686237]

Attachment: Weather active

Weather active

Comment 119

[u686237]

Attachment: Weather inactive

Weather inactive

Comment 120

[u686237]

@Mozilla:
Make Firefox more distinguishable regarding active/inactive window state by designing it at least like MS Edge's color adaption behaviour (see comment 116 and comment 117 above).
Your answer ("Status: RESOLVED WONTFIX") that you gave to this is insufficient and definitively not a solution.

Comment 121

[Misc]

(In reply to Riban from comment #56)

So how about this, Mozilla: If you abandon the Windows accent color and go with your own themes, fine.

How about we do NOT encourage terrible development practice?

There are tons a reasons why people change the theme on their OS. Most of them do that for the pure aesthetic visual part. But there are also those people how absolutely need it the way they set it up, i.e. visually-impaired.

Ignoring this is a big "f*** you" to the latter ones.

Comment 122

[:Gijs (he/him)]

(In reply to Mykola from comment #90)

(In reply to :Gijs (back Sept 20; he/him) from comment #1)

With Proton, the Default theme switches between Light and Dark based on the system settings. We've removed support for showing the Windows accent color.

So how we should distinguish between active and inactive Firefox window without accent color? Current defaults are horrible, because colors are almost the same.

Fixing this is tracked in bug 1704131 which is still open.

I'm restricting further comments here to protect the inboxes of everyone here, as no progress is being made and the majority of comments are advocacy.

If you have aesthetic concerns (ie you want a specific colour that you've set as your windows titlebar colour), they have been covered in earlier comments: you can configure a custom theme, either one made by others or a custom one from e.g. https://color.firefox.com/ . If you have functional concerns around distinguishing the active an inactive windows/titlebars of the default theme, as noted that is bug 1704131.