Bugzilla

**Context:**

I'm currently using the following code to detect the `prefers-color-scheme`
value for the user theme in Firefox and set the theme of my browserAction popup
accordingly.

```js
getTheme(currentTheme, window) {
  if (typeof currentTheme !== "undefined" && currentTheme !== "auto") {
    return currentTheme;
  }
  if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    return "dark";
  }
  return "light";
}
```

This has some shortcomings because:

a. The `prefers-color-scheme` value returned by my code is only the one for the
   content.
b. The user can set a different `prefers-color-scheme` for the chrome (UI) and
   the content (webpage area)

For example, if the user has a dark theme for the chrome but a light theme for
the content, my addon popup will use a light theme instead of a dark theme. This
creates a UX inconscitency because one could consider that the popup is part of
the chrome and not the content. (See screenshot)

**Solution:**

1. Firefox should expose the chrome `prefers-color-scheme` value of the chrome
   for elements like the browserAction popup, sidebar and other things that are
   linked to the chrome while exposing the `prefers-color-scheme` of the content
   for anything else.

   There's some drawbacks with this solution because we have to decide what and
   when the `prefers-color-scheme` should be the chrome or content one.

2. We expose both values in the Theming API and let the addon developer decide
   when and where to use it.

/cc :emilio which who I talked about this on #developer:mozilla.org and is definitely more knowledgeable than me.

**Context:**

I'm currently using the following code to detect the `prefers-color-scheme`
value for the user theme in Firefox and set the theme of my browserAction popup
accordingly.

```js
getTheme(currentTheme, window) {
  if (typeof currentTheme !== "undefined" && currentTheme !== "auto") {
    return currentTheme;
  }
  if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    return "dark";
  }
  return "light";
}
```

This has some shortcomings because:

a. The `prefers-color-scheme` value returned by my code is only the one for the
   content.
b. The user can set a different `prefers-color-scheme` for the chrome (UI) and
   the content (webpage area)

For example, if the user has a dark theme for the chrome but a light theme for
the content, my addon popup will use a light theme instead of a dark theme. This
creates a UX inconsistency because one could consider that the popup is part of
the chrome and not the content. (See screenshot)

**Solution:**

1. Firefox should expose the chrome `prefers-color-scheme` value of the chrome
   for elements like the browserAction popup, sidebar and other things that are
   linked to the chrome while exposing the `prefers-color-scheme` of the content
   for anything else.

   There's some drawbacks with this solution because we have to decide what and
   when the `prefers-color-scheme` should be the chrome or content one.

2. We expose both values in the Theming API and let the addon developer decide
   when and where to use it.

/cc :emilio which who I talked about this on #developer:mozilla.org and is definitely more knowledgeable than me.

**Context:**

I'm currently using the following code to detect the `prefers-color-scheme`
value for the user theme in Firefox and set the theme of my browserAction popup
accordingly.

```js
getTheme(currentTheme, window) {
  if (typeof currentTheme !== "undefined" && currentTheme !== "auto") {
    return currentTheme;
  }
  if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    return "dark";
  }
  return "light";
}
```

This has some shortcomings because:

a. The `prefers-color-scheme` value returned by my code is only the one for the
   content.
b. The user can set a different `prefers-color-scheme` for the chrome (UI) and
   the content (webpage area)

For example, if the user has a dark theme for the chrome but a light theme for
the content, my addon popup will use a light theme instead of a dark theme. This
creates a UX inconsistency because one could consider that the popup is part of
the chrome and not the content. (See screenshot)

**Solution:**

1. Firefox should expose the `prefers-color-scheme` value of the chrome
   for elements like the browserAction popup, sidebar and other things that are
   linked to the chrome while exposing the `prefers-color-scheme` of the content
   for anything else.

   There's some drawbacks with this solution because we have to decide what and
   when the `prefers-color-scheme` should be the chrome or content one.

2. We expose both values in the Theming API and let the addon developer decide
   when and where to use it.

/cc :emilio which who I talked about this on #developer:mozilla.org and is definitely more knowledgeable than me.