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
}