Firefox: How to test prefers-color-scheme?

Solution 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.

Solution 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