1176577 - [UX] Investigate adding a dark theme on Windows 10

Status: RESOLVED DUPLICATE of bug 1368808

(Firefox :: Theme, defect, P4)

Description

[Tim Nguyen :ntim]

Seems like MS is adding a dark theme for most of it's universal apps. 
Edge is also getting a dark theme that can be toggled through the settings : http://winbeta.org/news/windows-10-build-10147-microsoft-edge-goes-dark-side

That dark theme thing may get a system wide toggle in future updates (for consistency with Windows 10 mobile), so it may be worth investigating if we want one or not.

Comment 1

[Tim Nguyen :ntim]

Philipp, thoughts ?

Comment 2

[Jared Wein [:jaws] (please needinfo? me)]

Yeah we should do this. We should see what we can re-use from the Developer Edition theme, but we'll want to keep the curved tabs for non-DevEdition builds (but in a dark form of course).

Comment 3

[Tim Nguyen :ntim]

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #2)
> Yeah we should do this. We should see what we can re-use from the Developer
> Edition theme, but we'll want to keep the curved tabs for non-DevEdition
> builds (but in a dark form of course).

We can probably reuse that app specific lightweight theme system used for DevEdition. If we do this, it's probably worth converting most of our style definitons to CSS variables too.

Comment 4

[Tim Nguyen :ntim]

One question worth answering as well is if we want to support that dark theme on all platforms. Once we have this working on one platform, it should be pretty easy to get this maintained on all platforms (especially if we use CSS variables).

Comment 5

[Jared Wein [:jaws] (please needinfo? me)]

Yeah, we should support it on all platforms. It isn't much extra work to support it on the other platforms and it will be nice for those users too. Default Ubuntu already has a dark theme for the windows, so it will be nice to be matched in with that as well. As for OSX, it is not native but some users may prefer it and it is nice to be consistent with features like this one across platforms.

Comment 6

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

I agree that having a general dark theme makes sense.
We had plans for using a dark theme for private browsing, which I think is still the strongest case for having such a theme.

If Windows actually introduces a system-wide switch, that would of course create a conflict. Nonetheless, this should absolutely be on the list.

Comment 7

[Brian Grinstead [:bgrins]]

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #2)
> Yeah we should do this. We should see what we can re-use from the Developer
> Edition theme, but we'll want to keep the curved tabs for non-DevEdition
> builds (but in a dark form of course).

We can now add a built-in lightweight theme with LightweightThemeManager.addBuiltInTheme.  We do that for Dev Edition here: https://github.com/mozilla/gecko-dev/blob/60fd82095eb3c22e7bb42716849d0d48a30ee4d7/browser/components/nsBrowserGlue.js#L722.

If it just needs to change some colors that fit within the lightweight theming system, then all of the styling changes could be handled in that call to addBuiltInTheme.  If needed more customizations then it could use an extra stylesheet similar to DE.  Loading / unloading that sheet is managed here: https://github.com/mozilla/gecko-dev/blob/master/browser/base/content/browser-devedition.js.

Most of the custom CSS has to do with using non-rounded tabs and changing the amount of spacing above the tabs and window controls, but we also bump into a lot of issues with regard to menu text (for example Bug 1165718) and nav bar button / text styling (for example Bug 1112714).  I want to make sure that we tackle these problems together so we don't have to solve them twice and we can share effort.

Comment 8

[Brian Grinstead [:bgrins]]

Also, not sure if this would include reskinning all of the secondary UI elements (like popups, awesomebar, panel menu, etc), but I have a WIP for that in Bug 1090548.

Comment 9

[Brian Grinstead [:bgrins]]

If it needs more that the lightweight theming system provides, maybe we could share code by splitting the Dev Edition theme into separate files, one that handles the custom colors and one that handles the square tabs.

Comment 10

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to Brian Grinstead [:bgrins] from comment #9)
> If it needs more that the lightweight theming system provides, maybe we
> could share code by splitting the Dev Edition theme into separate files, one
> that handles the custom colors and one that handles the square tabs.

I think this would be a great route :)

Comment 11

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

We're still looking at making private browsing mode more distinct (across all platforms) by making the theme dark, so I'm afraid that this would clash with that effort.

Also, since Windows 10 doesn't have a global switch for a darker UI (it's Edge-specific), I think we can de-prioritize this for now in favor of other work.

Comment 12

[Tim Nguyen :ntim]

(In reply to Philipp Sackl [:phlsa] (Firefox UX) please use needinfo from comment #11)
> We're still looking at making private browsing mode more distinct (across
> all platforms) by making the theme dark, so I'm afraid that this would clash
> with that effort.
> 
> Also, since Windows 10 doesn't have a global switch for a darker UI (it's
> Edge-specific), I think we can de-prioritize this for now in favor of other
> work.

There's a hidden switch to make all apps dark in the registery, so I suspect MS may expose the functionality to the whole OS when it'll be polished enough.

Comment 15

[Dão Gottwald [:dao]]

Oh wait, I guess we can keep this bug open to automatically enable our Dark theme based on the Windows setting.