Firefox: How to test prefers-color-scheme? - css

Question

In Firefox 67, one can use media queries to detect user preference on light or dark theme.
In my version of Firefox (under Ubuntu), it seems that my preference is light theme. That is, the following CSS gives a blue background:
#media (prefers-color-scheme: light) {
:root {}
body {
background-color: blue;
}
}
How can I change my Firefox preferences so that prefers-color-scheme: dark
evaluates to true?
I found an add-on that seems to do the trick, but I must be doing something wrong with my own CSS, as it does not work on my page.
Dark Website forcer

Answer 1

Good news -- from Firefox 87 this is now enabled by default, without the need to set a configuration flag! You can find it in the inspector tab:
Choosing the sun button simulates light mode;
Choosing the moon button simulates dark mode;
With no button selected, your operating system default will be used, as per normal.
In some older versions of Firefox, this feature existed behind a flag. To test on one of those versions, you can thus enable this by going to about:config, and setting the devtools.inspector.color-scheme-simulation.enabled property to true. Once that's done, you'll find the controls for it in the same place as in the modern devtools, but as a single paintbrush icon rather than today's sun/moon toggle buttons.

Answer 2

You can update the style used by Firefox by going to about:config and adding a new property ui.systemUsesDarkTheme of integer type with value 1.
It doesn't automatically update the value on active pages in the same way that it does when you're updating OS settings in Windows or Mac, but if you refresh the page after updating it will pick up.
You can confirm the browser setting is correct by viewing the example on mdn
Edit:
On firefox 71 the update is applied to active pages without refresh

Answer 3

Just for the sake of completeness: If everything fails, there is a Firefox add-on called “Dark Website Forcer” (also on GitHub).
It changes the style by reading the CSS of the website and re-applying the parts for the dark version again, if you want to have a dark one. As such, it also can only force a dark website, not the light one. The Readme has a detailed explanation why.
Disclosure: I'm the author of this add-on. 🙂