How to check if the about:addons page is light or dark in Firefox 89?

Add-ons Development
1

It’s nice to make an extensions Options background color in the addons page match the background color of the rest of the page.

In Firefox 88, I could use the following line of code to detect if the addons page was light or dark:

window.matchMedia(’(prefers-color-scheme: light)’).matches

The color of the addons page only changed when the operating system theme was changed between light or dark or ui.systemUsesDarkTheme was set to 0 or 1 in about:config.

In Firefox 89, the about:addons page background color now changes to light or dark when ‘any’ Firefox theme is changed. If using the new ‘System theme’, I can check if it is in use as browser.themes.getCurrent() returns an object with all null values. If any other theme is chosen, though, I’m not sure how Firefox decides if the background should be light or dark.

2

Hi @Adam! I’m not 100% sure this will work, but could you try window.matchMedia("(-moz-toolbar-prefers-color-scheme: dark)").matches?

3

Hi, unfortunately, that command returns ‘false’ with dark theme, system dark theme, or other dark themes.

4

Sorry that didn’t work. :frowning: We took another look after your last post. It looks like theme.getCurrent() does not take dark_theme manifests into account. One of our theming developers thinks there could be a relatively easy fix to have it return darkValues.

Because the desktop CSS is too complicated to return useful values, it should be safe to assume that the function will return an empty object if the theme is light (once this is fixed).

We have a bug on file if you would like to follow it. :slight_smile:

5

Awesome, thank you :slight_smile: