CODEWITHSUNDEEP
cssmedia-queriesthemes
Per Alexandersson
Per Alexandersson

Reputation: 2523

Firefox: How to test prefers-color-scheme?

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

Upvotes: 64

Views: 19359

Answers (3)

toastrackengima
toastrackengima

Reputation: 8732

From Firefox 87, a feature to test prefers-color-scheme in the devtools is enabled by default, without any need to set a configuration flag. You can find it in the inspector tab:

The Firefox Developer tools, with prefers color scheme toggles circled

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

Upvotes: 83

rugk
rugk

Reputation: 5513

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. šŸ™‚

Upvotes: 4

Alex M
Alex M

Reputation: 3513

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

Upvotes: 53

Related Questions