mdn / mdn/webextensions-examples

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

Open
#480 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

example idle on hold
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:
  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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.