mdn / mdn/webextensions-examples
Theme-integrated-sidebar doesn't support dark mode or theme_experiment.
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 4.5k
- Forks
- 2.6k
- Avg merge
- 15h 27m
- Merged PRs (30d)
- 3
Description
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:
- 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 notbrowser.theme.getCurrent(), some other hook for getting the browser styles. - 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 AlpenglowandSystem theme - Autoare 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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the theme-integrated-sidebar example and its use of browser.theme.getCurrent(). Compare the reported behavior with themes that have light and dark modes and with theme_experiment; done would require a maintainable way for the sidebar to reflect the browser's active theme styling.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100