1505090 - Consider syncing DevTools theme and Firefox theme again

Status: NEW

(DevTools :: General, enhancement, P3)

Description

[Florens Verschelde :fvsch]

DevTools used to try to sync its theme with the Firefox theme. This was removed on purpose because the syncing a) didn't always made sense for users or when using the Firebug theme (https://bugzilla.mozilla.org/show_bug.cgi?id=1389939#c13) and b) was somewhat unreliable (I think?).

We're getting user requests to add this kind of syncing:
- bug 1394315
- bug 1502796
- some of the discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1471163#c24
- etc.

With Dark Mode in macOS Mojave, and still-growing dark UI trend among power users, this topic could come back regularly.

I propose this heuristic for accommodating users who expect DevTools to follow the Firefox (and perhaps the OS) theme and users who want more control:

1. Make the DevTools theme choice a 3-option choice: auto (default), light and dark.
2. The default behavior would be to try to follow the Firefox theme (theme syncing, in the Firefox->DevTools direction only).
3. And users could also select the light or dark theme manually, their choice would then stick.

If we don't want to pursue this, feel free to wontfix.

Comment 1

[Florens Verschelde :fvsch]

An alternative solution without automatic syncing would be to try to make DevTools theme options more discoverable. Two ideas (we could do either one, or both):

A. Try to detect when the Firefox theme and DevTools theme don't match, and show a notification/action bar. Message: "It look like you're using a dark Firefox theme. Would you like to use a dark theme for Developer Tools as well? [Use Dark Theme] [Keep Light Theme] [Do Not Show Again]"

B. Add a "Dark Mode" toggle in the DevTools "..." menu, to make the dark/light theme easier to discover. (Since we have the docking options there, this menu probably gets more use and eyeballs than the Settings page. Don't know if there is telemetry on this.)

Comment 4

[:Harald Kirschner :digitarald]

I agree with your proposal. If we copy Firefox's theme mode, with the options for default, light, dark; the DevTools default can act according to the system setting while defaulting to light for custom themes. I am sure I am missing something that makes this harder than laid out here.

We should follow up with some data analysis to see what kind of theme combos are being used out there. If it turns out that theme choices are aligned for most users, the syncing makes sense (especially with the recent dark mode resurgence due to OSX).

Tim, could you pull data to answer the question of how users combine default/dark/light themes in the browser vs devtools.

Comment 5

[Tim Smith (inactive) 👨‍🔬 [:tdsmith]]

> Tim, could you pull data to answer the question of how users combine default/dark/light themes in the browser vs devtools.

We don't track whether the default browser theme is displaying in dark mode or light mode (respecting the OS theme preference), and 85% of devtools users are using the default browser theme, which makes this hard to answer.

About 5% of devtools users on a recent day had the dark devtools theme enabled. These users were much more likely to have enabled the dark browser theme manually (~50%) than the population of all devtools users (~5%).

Comment 6

[:Harald Kirschner :digitarald]

Related, Edge Devtools now uses dark theme by default: https://blogs.windows.com/msedgedev/2019/04/26/edge-insiders-devtools-chromium-dark-theme/

Comment 10

[:Harald Kirschner :digitarald]

:victoria via https://bugzilla.mozilla.org/show_bug.cgi?id=1608648#c5

So, I see that if you're on the Default Firefox theme in MacOS, the browser UI does change to dark based on OS change. (If Light or Dark themes are specified, they remain unchanged.)
An extra radio button for "OS default" seems good to me. We can default to this in Stable/Nightly, but in DevEdition I think we'd still default to Dark.

Comment 12

[Max Dominik Weber]

This seems to have been fixed at some point: there is an “Auto” radio button now.