Inconsistency: extension popup's prefered color scheme

[theseanl]

The spec does not normatively describe how a document's prefers-color-scheme feature has to be determined. Chrome follows the OS's, and I believe Safari does so. In contrast, Firefox follows the scheme specified in the browser's theme by default, which is a change that has landed in https://bugzilla.mozilla.org/show_bug.cgi?id=1529323, and there is a about:config setting layout.css.prefers-color-scheme.content-override which allows users to customize this behavior. For instance, users can now set brower's theme to a dark theme while having contents prefers light theme.

Recently Firefox has landed a change in the same spirit, which makes addon's popup to follow the prefered color scheme of chrome, from the rationale of "addon popups belong to chrome" (bugzilla link). This was exactly to address an issue with users with 'dark chrome and light contents'. And precisely in this case, this creates an inconsistency of webextensions behavior that is, I believe to be nowhere present in other browsers, namely, the addon's options page and the addon's popup may have different prefers-color-scheme value.

In Chrome, regardless of the chrome theme having dark or light color scheme, extension's options page and the addon always have the same prefers-color-scheme value, so that extension developers can make sure that the extension's UI will have a unified theme throughout its every components. I'm wondering to know how things are in Safari. However, in Firefox, there is no such guarantee, and there is no technological workaround, as there is no JS/CSS API currently which would allow an addon's popup to determine in which theme its options page will be drawn. Even if there is a workaround, this requires extension developers to write additional code for Firefox to achieve its desired goal, which is obviously a bad experience.

It would be nice if different browsers can have a consistent behavior. I've also posted a related bug report. If there is a workaround that I'm not aware of, I'd appreciate if you could let me know.

[theseanl]

For reference, this issue lies in a broader issue of exposing chrome theme to extensions.

• Extension Icons for Light/Dark/Custom Theme #229
• https://bugs.chromium.org/p/chromium/issues/detail?id=893175

[carlosjeurissen]

@theseanl Adapting to the browser ui chrome (not the browser) like Firefox does seems to make sense design / logic wise. Is there a specific reason why this is troublesome for you / some use cases? Why is a technical workaround needed?

[theseanl]

@carlosjeurissen It's not about specific reason, please don't downplay this into a feature request.
It's about general developer expectation that their UI components will be displayed consistently across various components within a browser, and across different browsers.

In Chrome, regardless of the chrome theme having dark or light color scheme, extension's options page and the addon always have the same prefers-color-scheme value, so that extension developers can make sure that the extension's UI will have a unified theme throughout its every components.

Also I've explained it further in the linked bug report https://bugzilla.mozilla.org/show_bug.cgi?id=1780028

This change creates accessibility issue with users having dark chrome and light contents. As pointed out in the above linked reports, a lot of users are using this setting, because the role of using dark mode in chrome could be to make them "stay away" from attention. Although addon popups seem to be stemming from chrome, it is physically placed in the middle of content area, so it creates a UI with dark luminosity surrounded bright contents. Pupil adjust to the surrounding lights and makes the popup UI illegible.

Also, the Firefox's change is a breaking change. It is a generally accepted idea that breaking changes are undesirable.

[theseanl]

I just read the meeting notes. The discussion seems to be slightly missing the point that I intended. I'm actually not interested in how browsers are determining preferred color scheme.

Let me first clarify some terms I've been using:

• chrome: the browser's native UI
• content: the document rendered by the browser, as opposed to chrome.
• color scheme: a value of dark or light, since none other is implemented.
• content's preferred color scheme: the value of a media feature prefers-color-scheme evaluated on content.

The term chrome's preferred color scheme seems to be used in internally at Firefox to describe the behavior of the addon popup, and also in Chrome Extension API Proposal: Dark Mode Icon Support. It is something determined by browser-specific algorithm that takes account of browser themes. Because these two usage seem to be slightly different, we can define throughout this issue that:

• popup's preferred color scheme: the value of a media feature prefers-color-scheme evaluated in webextension popup.

to describe a phenomenon. Later the term chrome's preferred color scheme should be used to describe any standardized behavior.

The immediate issue I've faced is that, recent (breaking) change in Firefox have caused content's preferred color scheme to be different from popup's preferred color scheme. I think there are several reasons why it's bad, that's why I've raised https://bugzilla.mozilla.org/show_bug.cgi?id=1780028 and described accessibility issues and aesthetic issues.

To digress a bit, I've read in the meeting note that in Safari, popup's preferred color scheme follows that of browser's, not OS's. Then I have a question: is it possible in Safari for content's preferred color scheme to be different from popup's preferred color scheme?

Firefox developers may decide to close that as WontFix, in which case developers wanting to have consistent dark/night mode UI will resort to dynamically reading content's color scheme from elsewhere, or revert the breaking change, restoring the status quo.

Will Firefox developers be interested in instead opening up some customization ability to webextensions, by providing access to CSS media feature representing content's prefered color scheme? Some addons may want to blend into the chrome, while some may want to blend into contents. I understand that Firefox is currently trying to push addons popup to blend into native UI, for example by supporting browser_action.browser_style manifest key.

If Firefox developers decide so, it will be actionable in this group by introducing a unified approach in which browsers may expose chrome's theme to webextensions, which is a recurring theme, cf #229.

• Documentation:
  • Currently terms like "theme using dark" is sprinkled here and there in https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action. It can use a standardized terms like chrome's preferred color scheme.
• Standardizing prefers-color-scheme value in popup. To respect both Chrome and Firefox implementation.
• CSS media features querying chrome's preferred color scheme can be exposed to webextension popups, or maybe even into any chrome-extension://..., moz-extension://... domains. This will be a net new feature for Chrome.
  • If Firefox keeps current behavior, one may as well need a media feature for content's preferred color scheme. Having both chrome-prefers-color-scheme and content-prefers-color-scheme makes it backward-compatible.

Also, I believe there have been some discussion on how chrome theme has to be taken account in manifest keys, JS APIs. I think it was mostly about extension icons, where only chrome's preferred color scheme is relevant. There is one API action.setPopup that might be interested in distinguishing chrome's preferred color scheme and content's preferred color scheme. In this particular case however, using CSS media queries would be much more ergonomic.

[xeenon]

Safari supports the popup HTML picking a color scheme with the color-scheme CSS property or <meta name="color-scheme"> tag. If you put :root { color-scheme: light } in your CSS it will force the color scheme to be light, and the native popup UI will be light. Similar for dark. If the color-scheme is light dark then it will auto switch. If color-scheme is missing then Safari will assume the content is not dark mode aware and always use light mode for the popup. So if you want to support both modes you need to put :root { color-scheme: light dark } in your CSS or a meta tag.

[theseanl]

Thanks for the information that Safari defaults to light mode on extension popups when dark is not present in color-scheme.

If an extension supports both light mode and dark mode, it is a good idea to also use the only keyword in color-scheme value, which is supported by Chrome since Chrome 98. Browsers may apply custom color transformation to aid with websites not supporting dark mode properly, and having <meta name="color-scheme" content="only light dark"> makes the document opt-out of such a transformation.

[xeenon]

Safari does not do any such transformations currently, but Mail.app does and it respects only as you describe. If Safari started doing color transformations, we would also respect only.