The titlebar accent color can be customized with hidden preferences (Bug 1514715), go to about:config, right-click anywhere, choose context menu item New -> String and enter the following name and value pairs according to your theme.

Default theme
ui.-moz-win-accentcolor = #202340
ui.-moz-win-accentcolortext = #f9f9fa

Light theme
ui.-moz-win-accentcolor = #e3e4e6
ui.-moz-win-accentcolortext = #18191a

Dark theme
ui.-moz-win-accentcolor = #0c0c0d
ui.-moz-win-accentcolortext = #f9f9fa

Can we please reconsider this? This like the #1 complaint I see about Firefox 65. People using a dark theme want a dark theme and not something else.

It would be great if we could have a way to exempt at least the tabs themselves from the windows accent color.

I had windows set up with a rotating desktop background, and automatically matching accent color. And some accent colors make firefox's tabs noticeably harder to read. This isn't an issue for most apps, simply because they don't have anything worth reading in their title bar. And unfortunately, the hidden preferences mentioned by Kestrel above seem to get overwritten whenever the windows accent color changes.

(In reply to Dão Gottwald [::dao] from comment #14)

Windows already provides that option, and the people complaining here
explicitly enabled it...

Windows also has a Dark theme, and yet Firefox supports overriding the global Windows setting. In fact, most users complaining (me included) don't use the global Dark theme, but use the Firefox dark theme explicitly.

In that wain, seems it would make sense to honor the Windows default setting for accent color in the default Firefox theme, but make the explicit Light/Dark themes have light/dark titlebars?

Note that the above proposal matches our icons:

https://searchfox.org/mozilla-central/source/browser/base/content/defaultthemes/dark.icon.svg
https://searchfox.org/mozilla-central/source/toolkit/mozapps/extensions/content/default-theme-icon.svg

The default icon uses accent color (dark blue in case it's not clear) in the title bar, but Light and Dark don't.

Another reason that I think it is important that Firefox 65.0 ignore the accent color setting when you set Firefox for something different than the "default" theme (which uses the accent color) is because the latest version of Windows 10 version 1809 has an issue with the accent color. The issue is that this color is now much darker than it was in previous versions of Windows 10, all things being equal.

So for example, if you choose the blue Windows 10 background in Windows 10 version 1803 and below, and then let windows pick an accent color from it, it chooses a moderately light blue for title bars. It will color the tab bar and menu bar on Firefox this nice light shade of blue. And this makes the menu bar text (file, edit, view etc) and the min max close buttons black. It has always done this. But starting with version 1809, it now colors it a very dark blue, and as a result, the menu bar text and min max close buttons are colored white. A completely different look - one that I do not like. If you try and manually change the accent color to a lighter blue, this upsets the color balance in other areas of the operating system. To get around it, I used a combination of the light theme (for the black text and min max buttons) and a userchrome file, and like this, I could duplicate the look. But now, with the light theme having no effect at all with FF 65.0, it no longer works.

I think if we want the accent color look we choose the default theme. If we want another look, say a very light theme look, and we choose the light theme.. it should look different than the default theme. Based on what I have seen, many people allow the accent color to be used for title bars, the start menu and the taskbar. I believe they are selected by default. If that is true, then having a default theme and light theme behave basically the same makes no sense.

I think the assumption should be that people will use the accent color to color windows.

Another issue that I have seen that I have not seen talked about much is that when you add a theme to FF 65.0, restart the browser, there is a slight delay/lag for the theme to take effect. It starts off with the default theme and then one second later it draws the new theme. This should be instant not delayed.

As it turns out, I've decided to stick with using Windows 10 version 1803 and I use the default theme and everything is fine. But not so in the latest version of windows 10.

Here illustrates a little better what I mean.

So in this first image, with my Windows 10 version 1803 choosing an accent color off a background and applying it to the start menu, action center, task bar and title bar (which may be checked by default) and with Firefox version 65.0 set to "Default theme", with the menu bar enabled, we see this behavior:

https://imgur.com/a/Ypsyk1X

So far so good. This seems reasonable. It's always done this.

Now if we change default theme to light theme in Firefox 65.0, because we want a lighter look say, we see this:

https://imgur.com/a/TlnSMnG

Pretty much the same looking. Essentially there is no light theme. Why even have the option if the Windows 10 accent color, that many people have set to color title bars as well as others areas of the OS, can override it?

Before FF 65.0, if you did that, and changed to light theme, with all other settings the same, you would see this:

https://imgur.com/a/vgUufPD

Notice the light theme, with the menu bar and tabs light instead of the same color blue they are in default theme, like what happens in FF 65.0.

In Windows 10 version 1809, the accent color has changed to a much darker color. In versions 1803 and earlier, I would simply use the default theme since this worked for me. Now with this much darker color we see this:

https://imgur.com/a/Q4MMkaN

To deal with that, I used the light theme plus a userChrome.css file to make it look just like in 1803. But now with light theme not doing hardly anything, it doesn't work since the menu bar text and min max close buttons remain white.

With this new change in Windows accent color behavior, which may work fine in other areas of the operating system... it's only the title bar where the color has changed drastically, its likely many people will look to themes in FF to override this...since they want the rest of the OS colored using the accent color, and themes are no longer behaving in a helpful way.

Even more, like I mentioned, when you set FF 65.0 to use a theme that you can install from mozilla, and restart the browser.. it doesn't show the theme right away (at least for me on 1803/1809).. there is a lag... about one second as far as I can see...at first it shows the default theme then it shows the installed theme... this looks bad. I don't normally use themes (other than trying to deal with 1809 accent color issue) I just happened to notice it... it looks like it has a problem since as far as I can recall the theme should launch instantly not show two themes one after another.

This is not so much an issue for me at the moment since like I said I am using Windows 10 version 1803 and I am using the default theme. But doing anything else and I see the unexpected behaviors above - light theme not working, other themes not launching instantly with the browser etc.

I should have said to be a little more clear:

"In Windows 10 version 1809, the accent color as it is applied to title bars (but not other areas like start menu, taskbar - these are the same as they have always been etc) has changed to a much darker color"

https://imgur.com/a/Q4MMkaN

I should also mention that if you attempt to customize the accent color to make it lighter like it was version 1803, you upset the other colors that have been applied to task bar, start menu.. you make everything lighter and you lose contrast. So one solution was changing how FF shows with themes.

But this is not really the main point since the main point is regardless of which version of Windows 10 you use, with FF 65.0 themes are not working like they used to whether its light/dark theme not working as normal or themes loading oddly. The accent color in windows 10 setting is used to give the OS a uniform look with a nice color balance. If an app has a setting that allows me to change a color or theme.. then it should work... this is only sensible, other issues aside.

• On Linux the light and dark theme override the native titlebar color.
• Win10 titlebar color is tied to border color which makes it easier to see which window is foreground so users may be reluctant to disable.
• Edge, Vivaldi, Opera and Brave do not use accent color for titlebar.
• Internet Explorer uses accent color but with a transparent overlay for tabs which improves readability, does not have built-in dark mode.
• Chrome uses accent color but does not have built-in dark mode, installing a dark theme overrides accent color.

Firefox is unique in having a built-in dark mode that is using the accent color for the titlebar region. Most of the complaints seem to be coming from dark theme users, "dark mode should be dark" seems to be an overwhelming sentiment in bug duplicates, comments and on reddit. The accent color is meant to be highly contrasting which inherently conflicts with the dark theme when not used sparingly.

(In reply to Daan Schulpen from comment #26)

It would be great if we could have a way to exempt at least the tabs themselves from the windows accent color.

This exactly!

When I tell my OS to use an accent color for the title bar, then there is no reason to paint inactive tabs altogether.

As a workaround I set browser.tabs.drawInTitlebar to false.

Light theme doesn't work as supposed too. Basically both dark and light themes are now broken on some systems under certain circumstances (custom GUI settings, plugins for changing windows' GUI and such).

(In reply to Reiner Hormann from comment #34)

(In reply to Daan Schulpen from comment #26)

It would be great if we could have a way to exempt at least the tabs themselves from the windows accent color.

This exactly!

When I tell my OS to use an accent color for the title bar, then there is no reason to paint inactive tabs altogether.

As a workaround I set browser.tabs.drawInTitlebar to false.

Good workaround. Unfortunately this solution only works if you have set the title bar to be shown.

Here is an example of how the OS titlebar accent color setting affects native app window borders in dark mode. Note that without the accent it is very difficult to tell which window is foreground active, it only has a slightly darker border and brighter window controls. Some apps such as "Films & TV" make it worse by not changing their window control brightness. Turning off the titlebar/border accent significantly harms accessibility and is clearly not a desirable solution.

• The original bug reporter pointed out that the Settings app has an accented titlebar (Bug 1503022 Comment 2) and Firefox should be the same for consistency however this is no longer the case in 1809 with this or other native apps. The reporter also did not express interest in Firefox having a dark theme and was happy to override it so they were not representative of most dark theme users.
• Lightweight persona themes do not allow the titlebar to contrast significantly with the toolbar which is just a transparent overlay so this kind of dark theme was previously impossible.
• Static themes that advertise themselves as being dark generally do not have bright contrasting titlebars.
  https://addons.mozilla.org/en-US/firefox/search/?q=dark&sort=relevance&type=statictheme
• Dark extension themes all prefer dark titlebars (Arc Dark Theme, Zenfox, Night Owl, base16, Nord Theme and QuantumEdge Dark).
• Users have created dark themes that mimic the built-in one specifically to avoid the new titlebar accent (Default Dark Original, Default Dark Theme, Default Dark Fixed, Dark Theme2 with Win10).
• Installing a dark theme is an easy workaround but undermines the value of having one preinstalled and may not be updated with new theme properties as they become available (like the recent dark sidebar).

Dark theme complaints:
Bug 1504766, Bug 1513372, Bug 1514419, Bug 1523678, Bug 1523966, Bug 1524279
https://www.reddit.com/r/firefox/comments/al0t91/firefox_65_and_tab_bar_color/
https://www.reddit.com/r/firefox/comments/alba41/tab_bar_color_in_firefox_650_is_awful/
https://www.reddit.com/r/firefox/comments/alfb45/new_update_has_ruined_dark_theme_with_the_tab/
https://www.reddit.com/r/firefox/comments/al9d11/dark_theme_issues_with_new_update/
https://www.reddit.com/r/firefox/comments/aloan9/slick_dark_interface_became_blue_overnight/
https://www.reddit.com/r/firefox/comments/amcaoi/why_is_there_my_accent_color_here_instead_of_my/
https://www.reddit.com/r/firefox/comments/ambd8k/disable_windows_colour_setting_on_the_firefox/
https://www.reddit.com/r/firefox/comments/am6k4t/firefox_version_650_built_in_dark_theme_is_not_as/
https://www.reddit.com/r/firefox/comments/an9iuq/firefox_title_bar_turned_blue/
https://www.reddit.com/r/firefox/comments/anbgli/new_dark_theme_titlebar_no_longer_dark/
https://www.reddit.com/r/firefox/comments/ancqei/top_of_my_firefox_is_red_since_yesterday/

Light theme complaints:
Bug 1506183, Bug 1523768
https://www.reddit.com/r/firefox/comments/al0xpu/light_theme_does_nothing/
https://www.reddit.com/r/firefox/comments/amo6mu/what_happened_to_themes_and_address_bar_with_v65/

Light/dark theme complaints:
Bug 1523327
https://www.reddit.com/r/firefox/comments/al2f2v/since_ff65_the_lightdark_theme_doesnt_change_the/
https://www.reddit.com/r/firefox/comments/ang9sa/with_the_recent_update_the_light_and_dark_themes/

Reopening since the original UI consistency reason is no longer valid since 1809 and more importantly conflicts with what dark theme users want, as seen in other browsers, the dark themes available and user complaints. Disabling system-wide titlebar/border accents or using other dark themes as workarounds produce inferior results. While the emphasis is on the dark theme since it is most impacted, the light theme also has similar issues.

Tim, maybe you can take care of this?

Any frontend engineer can take a look at this I think, but this pressing issue deserves attention from UX and product, instead.
I agree that Dão and Tim are the most obvious candidates for implementing this change, but let's get some proper, professional, direction here.

Please don't add more to the pile of me-too's, or I'll be forced to restrict comments on this bug - which is a last-resort type of measure.

Peter, Stephen, this seems like an issue that is fairly high-volume from our community. Could you please take a look at the attached screenshots and provide us with a direction to take? Thanks much!

The fix would be as simple as removing those lines: https://searchfox.org/mozilla-central/source/browser/themes/windows/compacttheme.css#7-17

However, as Mike wisely says, this needs UX/product input :)

Mike has contacted MS to see if they have plans for supporting the "use accent color in title bars" setting in their own apps or for removing it.

Tracking for 66 and following up in email. I'm interested to see if we can improve this for users in 66, though we don't have a lot of time left in 66 beta.

MS' design guidelines for color usage mention that the accent color should be used to convey "state information". It doesn't sound like we're following that very well atm.

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

MS' design guidelines for color usage mention that the accent color should be used to convey "state information". It doesn't sound like we're following that very well atm.

The accent color mockups on that page actually show it being used in the title bar. If you're suggesting we should use the accent color /more often/ to convey state information, that seems rather off-topic here.

(In reply to Liz Henry (:lizzard) (use needinfo) from comment #44)

Tracking for 66 and following up in email. I'm interested to see if we can improve this for users in 66, though we don't have a lot of time left in 66 beta.

(In reply to Dão Gottwald [::dao] from comment #43)

Mike has contacted MS to see if they have plans for supporting the "use accent color in title bars" setting in their own apps or for removing it.

Since this is on a short schedule, can we change only explicit Dark/Light themes for uplift, and leave the Default in the current state?

We can always align with Microsoft at a later release if we ever get a response, and until then users can choose the one they prefer?

We need to revert any changes that deviate from these two rules for themes:

• Default should respect the system-level theme settings
• Dark/Light (and any other theme) should override system level themes and apply the styles of that theme

(In reply to Aaron Benson from comment #49)

We need to revert any changes that deviate from these two rules for themes:

• Default should respect the system-level theme settings

Should it, though? Note that Default == Light as far as Windows as concerned, and MS ignores the title bar setting in its own apps there as well. So we'd still be inconsistent with MS apps which seems to be the main source of user confusion here.

Windows 10 has a system level Light/Dark setting.
Choosing "default" in Firefox should select the Firefox light or dark theme based on the Windows setting.
(which I think is what Aaron was saying)

As opposed to making Firefox default always be the same as "light" on Windows, since that's what Firefox has historical looked like on the platform (which I think is what Dão is saying)

Yeah, I'm sure.

The intention for themes was always to follow those rules and to help clarify this we're changing the name of Default to Automatic and adding some description text which states the automatic/default theme inherits from the system. This will be handled in another bug.

The main issue here (I think) is that the light/dark themes should not inherit anything and are effectively overrides to the system theme.

(In reply to kit from comment #51)

Windows 10 has a system level Light/Dark setting.
Choosing "default" in Firefox should select the Firefox light or dark theme based on the Windows setting.
(which I think is what Aaron was saying)

Right. And just to be clear here that selecting light/dark theme in Windows does not mean that the theme setting in Firefox changes. Default inherits the system theme (light or dark) but still shows "Default" as the selected theme.

(In reply to Aaron Benson from comment #52)

The main issue here (I think) is that the light/dark themes should not inherit anything and are effectively overrides to the system theme.

That's one scenario, but Default/Automatic also silently enables the Dark theme when the OS is in Dark mode. Now, Windows doesn't care about whether it's in Dark or Light mode when it comes to the title bar setting -- it's always offered but never respected in most MS apps, but when it is respected it applies in both Light and Dark mode. So why should Default/Automatic respect the setting in Windows Light mode and not in Windows Dark mode?

Yeah there are some conflicts and we would like it to work this way. We have some thoughts on how to make it more clear to the user what's happening. Will file follow up bugs for those.

In the meantime, please revert any changes that don’t let the dark/light themes override the system theme settings (including the title bar accent color).

What about just an option checkbox to inherit the accent color or not?

kmag or aswan, review ping? We'd like to get this done asap as we want to uplift.

Backed out for multiple failures e.g browser_ext_management_themes.js

backout: https://hg.mozilla.org/integration/autoland/rev/5bd82b961200389233b8579eed5713fc3cc649cd

push with failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&revision=db927eedd3559216703d4978f8c6180cf2105733&group_state=expanded

failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=229387411&repo=autoland&lineNumber=8195

22:10:26 INFO - TEST-PASS | toolkit/components/extensions/test/browser/browser_ext_management_themes.js | webextension theme installed -
22:10:26 INFO - Buffered messages finished
22:10:26 INFO - TEST-UNEXPECTED-FAIL | toolkit/components/extensions/test/browser/browser_ext_management_themes.js | LWT disabled - Got Default, expected Bling
22:10:26 INFO - Stack trace:
22:10:26 INFO - chrome://mochikit/content/browser-test.js:test_is:1315
22:10:26 INFO - chrome://mochitests/content/browser/toolkit/components/extensions/test/browser/browser_ext_management_themes.js:test_management_themes:131
22:10:26 INFO - chrome://mochikit/content/browser-test.js:Tester_execTest/<:1106
22:10:26 INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1134
22:10:26 INFO - chrome://mochikit/content/browser-test.js:nextTest/<:995
22:10:26 INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<:803
22:10:26 INFO - Bling was disabled
22:10:26 INFO - TEST-PASS | toolkit/components/extensions/test/browser/browser_ext_management_themes.js | addon is theme - Expected: theme, Actual: theme -

Other permafailures:
https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=229388473&repo=autoland&lineNumber=1637
https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=229389925&repo=autoland&lineNumber=2696
https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=229390882&repo=autoland&lineNumber=1883

(In reply to Natalia Csoregi [:nataliaCs] from comment #61)

Backed out for multiple failures e.g browser_ext_management_themes.js

Sigh. The getStringPref("selectedThemeID", DEFAULT_THEME_ID) calls are bogus, but since fixing them isn't required for this bug, I restored them now to get this landed. Doesn't matter much, I guess, since LightweightThemeManager.jsm is going away.

https://hg.mozilla.org/mozilla-central/rev/bcd9f3e73031

ni? for uplift

Waiting for verification in Nightly.

We tested it on Windows 10 x64(dark mode on) with a Nightly 67.0a1(2019-02-15) and with the latest Nightly 67.0a1(2019-02-22)but we didn't see any differences in the title bar section.

(In reply to ovidiu boca[:Ovidiu] from comment #67)

We tested it on Windows 10 x64(dark mode on) with a Nightly 67.0a1(2019-02-15) and with the latest Nightly 67.0a1(2019-02-22)but we didn't see any differences in the title bar section.

What steps did you follow? Did you enable Windows' "Use accent color in title bar" option?

We enabled it as you suggested and also Dark theme(the Windows) is selected, but we don't see any differences between the builds from Nightly 67.0a1(2019-02-15) and Nightly 67.0a1(2019-02-22)

We did some exploratory and I think we figured out what are the steps here:

STR:

1. Enable Windows' "Use accent colour in title bar" option
2. Set the browser to the dark theme
3. When you focus the browser the title bar colour remains dark. (black)

With the Nightly 67.0a1(2019-02-15) build the title bar colour is the same as the accent colour from Windows when the browser window is in focus.
With the Nightly 67.0a1(2019-02-22) build the title bar colour remains dark when the browser window is in focus, as expected.

Dão, please confirm if the above is correct.

That's correct.

Comment on attachment 9043834 [details]
Bug 1504766 - Let explicit Dark and Light themes ignore the Windows 10 setting for accent color in title bars. r=ntim

Beta/Release Uplift Approval Request

Feature/Bug causing the regression

bug 1503022

User impact if declined

it's complicated... (see this bug's history)

Is this code covered by automated tests?

No

Has the fix been verified in Nightly?

Yes

Needs manual test from QE?

Yes

If yes, steps to reproduce

see comment 70

List of other uplifts needed

none

Risk to taking this patch

Low

Why is the change risky/not risky? (and alternatives if risky)

It's not a super simple CSS-only fix but in the end it's still pretty straightforward

String changes made/needed

none

Comment on attachment 9043834 [details]
Bug 1504766 - Let explicit Dark and Light themes ignore the Windows 10 setting for accent color in title bars. r=ntim

Verified in nightly, OK for uplift for beta 11.
Looks great, thank you!

Maybe worth a release note - what do you think?

Don't think so. That users need to enable this obscure Windows setting that is ignored by many apps, and then also enable the dark theme in Firefox, makes this an edge case. Though if SUMO folks can confirm that this is a high volume issue (AFAIK so far they haven't), we could reconsider.

https://hg.mozilla.org/releases/mozilla-beta/rev/b9fe883c6c1e

It was reported at the channel meeting a few times that this was the top complaint for the 65 release and there are also seven duplicate bugs - that's fairly indicative of this being a big issue for at least those folks.

This still sounds rather vague. Yes, a bug being filed means it's an issue for the person filing it. Seven bugs being filed doesn't mean much except that seven people cared enough to file a bug. A bug reporter can represent millions of other users or nobody else or anything in between. What does top complaint mean in absolute numbers? Was 65 a relatively calm or rocky release?

Anyway, please feel free to add this to the release notes if you consider this noteworthy enough. I wasn't in the channel meeting so you know more about that than I do.

I verified this on Beta 20190304101322 on Windows 10 x64 and I can confirm the fix.

Discussed and agreed with Dão that he will contact MS about this issue.

Added a release note. Fixed: The Dark and Light Firefox themes now override the system setting for title bar accent color on Windows 10