Closed Bug 1176577 Opened 5 years ago Closed 2 years ago

[UX] Investigate adding a dark theme on Windows 10

Categories

(Firefox :: Theme, defect, P4)

defect

Tracking

()

RESOLVED DUPLICATE of bug 1368808
Tracking Status
firefox41 --- affected

People

(Reporter: ntim, Unassigned)

References

Details

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.
Philipp, thoughts ?
Flags: needinfo?(philipp)
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).
(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.
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).
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.
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.
Flags: needinfo?(philipp)
(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.
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.
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.
(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 :)
Priority: -- → P3
See Also: → 1185275
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.
Priority: P3 → P4
(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.
Duplicate of this bug: 1262327
Status: NEW → RESOLVED
Closed: 3 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1366363
Oh wait, I guess we can keep this bug open to automatically enable our Dark theme based on the Windows setting.
Status: RESOLVED → REOPENED
Depends on: 1366363
Resolution: DUPLICATE → ---
Blocks: 1368808
No longer blocks: windows-10
Status: REOPENED → RESOLVED
Closed: 3 years ago2 years ago
No longer depends on: 1366363
Resolution: --- → DUPLICATE
Duplicate of bug: 1368808
No longer blocks: 1368808
You need to log in before you can comment on or make changes to this bug.