How do you detect dark mode in about:addons?

Add-ons Development
#1

My add-on displays an options page on the about:addons menu, but I’m having some trouble getting it to work well when the user is running the dark mode theme on Firefox 89.

All of the UI on the about:addons page is displaying in dark mode now (I think this is a recent change, since I can’t reproduce this in Firefox 88). But my HTML file for the options page displays in the normal colors. I’m looking for a way (either using CSS or JavaScript) that I can detect if the about:addons page is in light more or dark mode.

I’ve already tried window.matchMedia('(prefers-color-scheme: dark)').matches and that returns false, so it looks like either Firefox is not using that media query when the theme is set to dark or it’s not giving add-on the ability to see that media query.

#2

Does it work to use different rule blocks in your CSS? This works when I toggle ui.systemUsesDarkTheme between 0 and 1 but I didn’t test changing the Windows system theme:

body {
	--body-text-color: #00f;
	color: var(--body-text-color);
	--body-back-color: #ff0;
	background-color: var(--body-back-color); 
}
/* Color scheme */
@media (prefers-color-scheme: light) {
	body {
		--body-text-color: #000;
		--body-back-color: #f8f8f8;
	}
}
@media (prefers-color-scheme: dark) {
	body {
		--body-text-color: #f4f4f4;
		--body-back-color: #333;
	}
}

(The defaults are just for testing… you would of course choose a more sensible default!)

#4

There are bugs open to be able to get this information from the theme API: https://bugzilla.mozilla.org/show_bug.cgi?id=1564276 or https://bugzilla.mozilla.org/show_bug.cgi?id=1542044 etc.