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
