1593355 - Add support for dark mode to WebExtensions UI (options, sidebar, popup)

Status: RESOLVED FIXED

(WebExtensions :: Frontend, enhancement, P3)

Description

[YUKI "Piro" Hiroshi]

Attachment: Screenshot

Firefox supports Dark app color on Windows 10, but the color scheme is not applied to the options page embedded in about:addons as the attached screenshot.
(This is originally reported at https://github.com/piroor/treestyletab/issues/2405 )

Steps to reproduce:

1. Change the default application color to "Dark" on Windows 10. (Settings -> Personalization -> Colors -> Custom -> Choose your default app mode -> Dark)
2. Start Firefox.
3. Install any addon with options page embedded in about:addons with browser_style: true. I've confirmed with https://addons.mozilla.org/firefox/addon/tree-style-tab/
4. Go to the options page of the addon.

Expected result

The options page is shown with Dark color.

Actual result

The options page is shown with bright color.

Environment

• Windows 10 Home 1903
• Nightly 72.0a1 build ID 20191101093621

Comment 1

[YUKI "Piro" Hiroshi]

I've not tested this on macOS, so this is possibly a problem not depending on Windows.

Comment 2

[Mark Striemer [:mstriemer]]

Are you hoping that because TST is using browser_style: true we can update the colours automatically? This seems reasonable but I'm not sure how it will work in practice. Extensions can use whatever colours they want in their CSS and those could become unreadable if we change the default background/text colour.

I figured extensions would add dark mode if they felt like supporting it, similar to the original issue report you got. We could hypothetically add another property to the options_ui manifest entry to tell Firefox that the extension's UI supports dark mode and update the defaults.

This is something I knew would look weird but didn't have time to sort out a proper solution. What would you like to see here (that would hopefully not break other extensions).

Comment 3

[Mark Striemer [:mstriemer]]

Here's what was happening in the XUL about:addons for context (which had a transparent background on the extension options browser) bug 1544212.

Comment 4

[YUKI "Piro" Hiroshi]

(In reply to Mark Striemer [:mstriemer] from comment #2)

Are you hoping that because TST is using browser_style: true we can update the colours automatically?

Yes, I forgot to write about that. Sorry.
https://searchfox.org/mozilla-central/rev/35873cfc312a6285f54aa5e4ec2d4ab911157522/browser/components/extensions/extension.css#9
Style rules applied with browser_style: true are defined in this file, and colors in the file are defined just same as light color scheme. They looks should be overridden with dark colors in something way (for example @media (prefers-color-scheme: dark) { ... }) when the Dark theme is applied.

Comment 5

[Tim Nguyen :ntim]

(In reply to YUKI "Piro" Hiroshi from comment #4)

(In reply to Mark Striemer [:mstriemer] from comment #2)

Are you hoping that because TST is using browser_style: true we can update the colours automatically?

Yes, I forgot to write about that. Sorry.
https://searchfox.org/mozilla-central/rev/35873cfc312a6285f54aa5e4ec2d4ab911157522/browser/components/extensions/extension.css#9
Style rules applied with browser_style: true are defined in this file, and colors in the file are defined just same as light color scheme. They looks should be overridden with dark colors in something way (for example @media (prefers-color-scheme: dark) { ... }) when the Dark theme is applied.

Main problem with this approach as Mark points out is that some extensions might use that stylesheet without expecting it to switch colors with the OS dark mode.

I think we should just build a better browser_style and deprecate the current one. There's a bunch of issues with the current way browser_style is made and this is just the tip of the iceberg.

Comment 6

[Henrik Skupin [:whimboo][⌚️UTC+1]]

So this is not only a missing feature for the options page but also for the sidebar and popups.

I tried to use @media (prefers-color-scheme: dark) for my extension but that also doesn't work and CSS values as set aren't recognized. Same happens when just importing chrome://global/skin/in-content/common.css for testing purposes.

Comment 8

[Rob Wu [:robwu]]

As mentioned at https://bugzilla.mozilla.org/show_bug.cgi?id=1703206#c15, @media (prefers-color-scheme: dark) currently maps to the theme from the OS.

And I agree with ntim above in comment 5 that browser_style has several defects, to the point that we may as well deprecate/remove it.

I support the goal ("Add support for dark mode to WebExtensions UI"), but the path to the implementation is not as obvious. We can probably not change the defaults implied by browser_style because that would break extensions that aren't designed for it. To me, reasonable alternatives include CSS variables for certain colors/semantics of interest and/or updating the theme API to return the effective set of colors (if that is possible at all*).

* The logic for deriving theme colors are complicated. When a custom extension theme is set, the theme is more obvious (as it's mostly the return value of browser.theme.getCurrent(), provided that the colors are fully set). When an extension specifies a dark theme through the dark_theme key, then the colors are used if some complicated set of conditions is met: https://searchfox.org/mozilla-central/rev/70a94bffbb73d2b0ba751fb3905428fdbcd4d402/toolkit/modules/LightweightThemeConsumer.jsm#270-274 (note that the condition changed recently in bug 1546540, so it's not even that stable).

Comment 10

[Emilio Cobos Álvarez [:emilio]]

After bug 1529323 prefers-color-scheme should work by default.

Comment 11

[:Gijs (he/him)]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #10)

After bug 1529323 prefers-color-scheme should work by default.

Should we close this out, then? Rob?

Comment 12

[Rob Wu [:robwu]]

(In reply to Rob Wu [:robwu] from comment #8)

And I agree with ntim above in comment 5 that browser_style has several defects, to the point that we may as well deprecate/remove it.

We have removed browser_style in MV3 (bug 1827910). We cannot make such a change for MV2 because it may negatively affect extensions that expect the current style.

(In reply to :Gijs (he/him) from comment #11)

(In reply to Emilio Cobos Álvarez (:emilio) from comment #10)

After bug 1529323 prefers-color-scheme should work by default.

Should we close this out, then? Rob?

Yes. @media (prefers-color-scheme: dark) should be an acceptable work-around for extension developers. The issue from comment #6 has been fixed.

Comment 13

[Henrik Skupin [:whimboo][⌚️UTC+1]]

(In reply to Rob Wu [:robwu] from comment #12)

Yes. @media (prefers-color-scheme: dark) should be an acceptable work-around for extension developers. The issue from comment #6 has been fixed.

I finally had the time to update my extension and I can say that it works great at least for the sidebar (it doesn't have any options or popups yet). Thanks!