As big fan of dark modes, I was very happy to learn that Firefox now supports the prefers-color-scheme media query.
However, I find i a bit hard to test this quickly on my maschine. It would be great to be able to switch between prefered color schemes similarily to the device presets in responsive mode. Or to be able to set a prefered scheme using developer tools.
I think this might be related to: https://bugzilla.mozilla.org/show_bug.cgi?id=1202711
You can check this addon that might help you: https://addons.mozilla.org/en-US/firefox/addon/dark-mode-website-switcher/?src=external-twitter
For me, the developer version on Firefox stays on light mode even if the system is on dark. It works perfectly on stable Firefox and Chrome. what could be going on?
Hi, I’m the author of the previously mentioned extension.
First of all, great to see the extension is useful for you!
However, due to a missing API in Firefox, the manipulation is indeed more of a workaround in a hackish way and certainly not a good way. This is also stated in various places, so read the Readme for a more detailed explanation. The API Bugzilla request is here in case you want to upvote it.
Apart from all that recent Firefox versions, however have introduced a feature for developers so you can change the style in dev-tools. Just enable the option devtools.inspector.color-scheme-simulation.enabled and then you can find this button:
There was also a preference ui.systemUsesDarkTheme for globally forcing the dark style, but somehow that did not work for me in Firefox 83.
Note that the color scheme simulation feature is enabled by default starting from Firefox 87.
The UI got changed and there are now two buttons for enabling dark or light color scheme simulation:
Note that the UI for it might still change in the future.
Sebastian
Huh, this doesn’t seem to work for addon popup debugging. If I switch both to light, the page itself and the addon popup via the devtools-toolbox, the page turns light but my popup stays dark and a matchMedia('(prefers-color-scheme: dark)') in the addon console still returns true
It’s tricky. You can use the about:debugging page to open the Inspector for an extension, disable auto-close of pop-ups, open the popup, switch the focus of the Inspector and then use the Rules panel. Debugging | Firefox Extension Workshop
It might be simpler to modify the global preference.
(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.
(2) In the search box in the page, type or paste the new preference name
ui.systemUsesDarkTheme
(3) On the bar with the bolded preference name, click the radio button next to Number and click the + button to add the preference. Then Firefox should display the new value.
(4) Set the value as desired (double-click to edit if necessary) and click the blue checkmark button to save the change.
