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