Detecting dark theme for options pages in WebExtension?

Hi Everyone,

I checked Firefox Nightly and seems that dark theme for in-content pages is comming. Its already working great but the options page of my extension is still in light mode and looks terrible.

I already tried to not define colors, but its not working. Same for media queries because it seems to be disabled because of fingerprinting(?) If i am not wrong, there are no CSS vars etc. too or?

How i can detect it to show the options page in dark mode as well as the rest of the UI?

window.matchMedia("(prefers-color-scheme: dark)") works for me, but it does seem to be affected by the privacy.resistFingerprinting pref.

I tried again but it always returns “false” for dark but “true” for light.

I change the option privacy.resistFingerprinting but nothing changed… what i make wrong?

Dark mode works well for my extension’s Option page (Flickr Fixr). And no nightly browser needed, works fine with current Firefox 68 release-version and with Strict Content blocking enabled in browser settings (including blocking fingerprinters).

You can discuss if it is pretty what I have made, but it definitely works as intended.
All I have made is a CSS media declaration for my Options page:

@media (prefers-color-scheme: dark)  {
        body {background-color: rgb(42, 42, 46); color: rgb(249, 249, 250);

It works for me as well for all files except files defined via:

"options_ui": {
    "page": "options.html"

If I am not wrong but Flickr Fixr does not have such options page or?

It sure does. But it is defined to open in a new tab. Apparently in latest Firefox versions you have to open it via the the three-dots menu to the right in your screenshot.

In manifest.json, it is defined like this:

  "options_ui": {
    "page": "options/options.html",
    "browser_style": true,
    "chrome_style": true,
    "open_in_tab": true