Theme-integrated-sidebar doesn't support dark mode or theme_experiment.

[jeb5]

theme-integrated-sidebar is an example extension intended to show a sidebar that reflects the colors of the current browser theme.
browser.theme.getCurrent(); is used to get the current window's theme, and the color property of this theme object is used to style the sidebar. However, browser.theme.getCurrent() is flawed in that it returns only the light-mode version of the theme.
Themes like Mozilla's own System theme - Auto, and Firefox Alpenglow have their own light and dark modes. Using theme-integrated-sidebar along with these themes shows a very out-of-place light sidebar against an otherwise dark browser, as the sidebar only takes on the light version of the theme.

I can think of two possible solutions:

1. Ideally, browser.theme.getCurrent() would return the actual colors being used to style the browser, not just the light-mode version of the theme. If not browser.theme.getCurrent(), some other hook for getting the browser styles.
2. theme-integrated-sidebar should at least be updated with a workaround to these problems. As far as the MDN docs say, themes cannot include dark and light versions. This means that Firefox Alpenglow and System theme - Auto are the only two exceptions to the rule. By detecting whether dark mode is enabled, and detecting whether either of these two themes are in use, the extension could handle this exception, setting its styles accordingly.

Option 2 is not ideal, first because it doesn't account for any light/dark themes that might be introduced in the future, second because it doesn't account for any styles set through the theme_experiment manifest key, and third because it would make for an overly-complicated example extension.

[pastasonica]

Udif

[rebloor]

See Bug 1542044 - browser.theme.getCurrent() & onUpdated should take in account dark_theme manifest field