Proton TitleBar color - Default Theme doesn't match to Windows accent color
Categories
(Firefox :: Toolbars and Customization, defect)
Tracking
()
People
(Reporter: acid.crash.lv, Unassigned)
References
Details
Attachments
(32 files)
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details | |
(deleted),
image/png
|
Details |
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•4 years ago
|
||
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 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?
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.
Updated•4 years ago
|
Comment 4•4 years ago
|
||
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.
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•4 years ago
|
||
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•4 years ago
|
||
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.
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.
(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 hidden (metoo) |
Comment 11•4 years ago
|
||
(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•4 years ago
|
||
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 hidden (advocacy) |
Comment hidden (advocacy) |
Comment hidden (metoo) |
Comment hidden (advocacy) |
Comment hidden (advocacy) |
Comment 19•3 years ago
|
||
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 hidden (advocacy) |
Comment hidden (metoo) |
Comment hidden (advocacy) |
Comment 23•3 years ago
|
||
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•3 years ago
|
||
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•3 years ago
|
||
Comment 26•3 years ago
|
||
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•3 years ago
|
||
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•3 years ago
|
||
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•3 years ago
|
||
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 hidden (advocacy) |
Comment hidden (advocacy) |
Comment hidden (advocacy) |
Comment 33•3 years ago
|
||
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•3 years ago
|
||
(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 hidden (advocacy) |
Comment 36•3 years ago
|
||
(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 hidden (advocacy) |
Comment hidden (off-topic) |
Comment hidden (advocacy) |
Comment hidden (off-topic) |
Comment hidden (advocacy) |
Comment hidden (off-topic) |
Comment hidden (advocacy) |
Comment 44•3 years ago
|
||
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•3 years ago
|
||
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•3 years ago
|
||
Comment 47•3 years ago
|
||
Tab bar buttons and tab titles of inactive windows are still white and therefore impossible to see.
Comment hidden (advocacy) |
Comment hidden (advocacy) |
Comment hidden (off-topic) |
Comment hidden (advocacy) |
Comment hidden (advocacy) |
Comment hidden (advocacy) |
Updated•3 years ago
|
Comment 54•3 years ago
|
||
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•3 years ago
|
||
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 hidden (advocacy) |
Comment hidden (advocacy) |
Comment 61•3 years ago
|
||
(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 hidden (off-topic) |
Comment 63•3 years ago
|
||
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•3 years ago
|
||
(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•3 years ago
|
||
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•3 years ago
|
||
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•3 years ago
|
||
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•3 years ago
|
||
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•3 years ago
|
||
#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 hidden (off-topic) |
Reporter | ||
Comment 73•3 years ago
|
||
Hi here,
so could someone please post the full set of CSS to restore accent color for the tabbar?
Comment 74•3 years ago
|
||
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•3 years ago
|
||
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•3 years ago
|
||
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 hidden (advocacy) |
Comment 78•3 years ago
|
||
(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•3 years ago
|
||
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.
- Menubar background color of active Firefox windows with Windows Accent color of active windows:
#toolbar-menubar {
background: -moz-accent-color !important; }
- 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; }
- Menubar text color of active Firefox windows with Windows Accent color of active windows:
#toolbar-menubar {
color: -moz-accent-color-foreground !important; }
- 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; }
- Tabbar background color of active Firefox windows with Windows Accent color of active windows:
#TabsToolbar {
background: -moz-accent-color !important; }
- 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; }
- 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; }
- 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•3 years ago
|
||
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•3 years ago
|
||
Also missing
- Color of the text of inactive tabs in inactive Firefox windows taken from the Windows inactive window title text color.
Comment 82•3 years ago
|
||
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 hidden (advocacy) |
Comment 85•3 years ago
|
||
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 hidden (advocacy) |
Comment hidden (advocacy) |
Comment 90•3 years ago
|
||
(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•3 years ago
|
||
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•3 years ago
|
||
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•3 years ago
|
||
Brave bright active
Comment 94•3 years ago
|
||
Brave bright inactive
Comment 95•3 years ago
|
||
Brave dark active
Comment 96•3 years ago
|
||
Brave dark inactive
Comment 97•3 years ago
|
||
Calc active
Comment 98•3 years ago
|
||
Calc inactive
Comment 99•3 years ago
|
||
Edge active
Comment 100•3 years ago
|
||
Edge inactive
Comment 101•3 years ago
|
||
Opera bright active
Comment 102•3 years ago
|
||
Opera bright inactive
Comment 103•3 years ago
|
||
Opera dark active
Comment 104•3 years ago
|
||
Opera dark inactive
Comment 105•3 years ago
|
||
Weather active
Comment 106•3 years ago
|
||
Weather inactive
Comment hidden (advocacy) |
Comment 108•3 years ago
|
||
@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 hidden (advocacy) |
Comment 110•3 years ago
|
||
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•3 years ago
|
||
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•3 years ago
|
||
Calc active transparency off
Comment 113•3 years ago
|
||
Calc active transparency on
Comment 114•3 years ago
|
||
Calc inactive transparency off
Comment 115•3 years ago
|
||
Calc inactive transparency on
Comment 116•3 years ago
|
||
Edge active
Comment 117•3 years ago
|
||
Edge inactive
Comment 118•3 years ago
|
||
Weather active
Comment 119•3 years ago
|
||
Weather inactive
Comment hidden (advocacy) |
Comment hidden (advocacy) |
Comment 122•3 years ago
|
||
(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.
Updated•3 years ago
|
Updated•1 year ago
|
Description
•