Extensions API to query the current browser theme

[sohailrajdev97]

Problem Statement

Users can change the browser’s default theme. Extensions have no way to get the browser’s current theme information and style their UI accordingly. The below screenshots demonstrate the problem.

Extension popup cannot be styled as per the browser theme.

Other browser dialogs are styled appropriately.

Chromium bugs / developer requests:

• [Feature request] API to call current chrome window color palette [325678961] - Chromium
• I want to have access to the theme values (chrome://theme/colors.css?sets=ui,chrome) [358041215] - Chromium

Current Support

Firefox

• Firefox has browser.theme.getCurrent() method but it only returns the theme information set by extensions.
• If the user is using the default theme, it does not return the theme information.
• From our local testing, we could not find a way to change browser colors without enabling an addon.

Similarly, there is a browser.theme.onUpdated event which is fired when an extension supplied theme is changed.

Chromium

• Extensions cannot get the browser’s theme information.
• Chromium does not have a chrome.theme namespace.
• Browser color can be changed:
  • By installing an extension.
  • From the browser settings (without installing an extension).

Questions

1. In Firefox, why does browser.theme.getCurrent() return null data for the default browser theme?
2. Can this behavior be changed to also return data for the default browser theme?

Proposal

Like Firefox, other browsers (Chromium and Safari) should implement theme.getCurrent() API to enable extensions to retrieve browser’s theme information.

Opening this issue to get feedback from the community group. We will work on a formal proposal after we have consensus on the next steps.

[fregante]

CSS technically has the ability to use the OS color, but these keywords have been broken for a long time (or maybe they only worked in IE)

https://developer.mozilla.org/en-US/docs/Web/CSS/system-color

I think supporting this would go a long way, but unfortunately it doesn't work:

background-color: Canvas;
color: CanvasText;

My use case would be to make my sidePanel extension blend in with the browser.

[dotproto]

@fregante, what browsers do the systems styles not work in? I tested that CSS snippet a few months ago in Firefox and it worked as expected.

[fregante]

They "work" by changing the color, but they "don't work" because the color doesn't actually match the browser's theme. Here's Firefox and Chrome. To be fair even Firefox' own sidebar isn't tinted here. Safari is the only one that sets the same exact "Canvas" color as some preference panes, but it's easy because Safari doesn't support tinting.

https://codepen.io/fregante/pen/oNrMJWB?editors=1100

[Rob--W]

Could you provide scenario's that you'd like to cover with the request for querying the current theme?

System colors should be used where applicable. For other cases, the group's general preference is to expose this through CSS variables, instead of an API such as theme.getCurrent().

In Firefox, why does browser.theme.getCurrent() return null data for the default browser theme?

Originally the motivation was "Well, the default theme(s) does more than what the theming api can do, which makes it hard to return theme data." per https://bugzilla.mozilla.org/show_bug.cgi?id=1435216#c4.

[xeenon]

Indeed, some theme values can't be exposed due to their dynamic nature. However, exposing a well-defined set of CSS variables would be a good start and would greatly benefit extensions that want to match the browser theme or system appearance.

One of the dynamic complexities on Apple platforms is that the background material is often a blurred "glass" effect, tinted based on the background content. Since this isn’t a single color, we can support it by rendering extension web views with a transparent background, allowing HTML content to composite over it. Although we already do this for popups in Safari, most extensions don’t take advantage of it because they set a solid color for the background of the body or main element. If we exposed a background color variable, it would likely return transparent, enabling the extension to use the dynamic material instead.

Safari extensions can access system colors today via WebKit’s -apple-system-* color keywords. While these aren’t CSS variables, they are CSS keywords that automatically adapt to light and dark modes. Although they currently work only in Safari, this list could serve as a good starting point for considering which CSS variables we should expose cross-browser for web extensions.