It just looks not nice like that:
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:
Also for sidebars this is possibly even worse, as they take even more screen space.
So what could we do?
- Firefox could just return the Firefox’ internal style for WebExtensions when they use
- Or a new JS API or CSS selector for WebExtensions?
- Or is there actually some way, to detect all this currently?