Firefox: How to test prefers-color-scheme?

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

Answer 1

Another way to do this is to go to about:config, and set the devtools.inspector.color-scheme-simulation.enabled property to true.

This adds a button to the devtools inspector tab which allows you to quickly switch between emulating light mode and dark mode on the current page.

Eventually this feature will no longer be hidden behind a flag. You can track its progress on Bugzilla. As of November 2020, there is also a new bug for getting this flag enabled by default.

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.