It should just use a custom dark theme then. Similar to how Firefox’ internal add-ons/popups do…
How to solve?
Actually, with the new prefers-color-scheme CSS media feature introduced in Firefox 67, websites can request whether the system uses a dark or light theme!
This is awesome! Obviously, because add-ons can do the same!
However Firefox really only sets prefers-color-scheme to “dark” when the system theme is dark!
When you only change Firefox’ own theme (which changes the title bar etc.) to “dark”, it does not work.
Is this what we want?
IMHO, at least for add-ons, this is not so good, because actually it looks as awkward, when the website and system is light, but the popup of the add-on that originates from the dark Firefox UI is light:
I set custom CSS properties on my popup’s body element, and I use that custom CSS properties in my popup.css stylesheet. You can get a listing of the available values with console.log(theme.colors). The output will be displayed in the popup console you can get by going to about:debugging and inspecting your extension.
BTW if you only care about detecting the system dark/light design, you can alternatively (without an extra theme permission), also prefers-color-scheme. It allows you to detect whether the system/user wants a dark website, so you can adjust your CSS. You can check that with JS, too.