60

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

5
  • This isn't of much help to you, but on macOS, I can only get it to change if I change it in Preferences > General. :|
    – grooveplex
    May 31, 2019 at 21:08
  • What is the :root property for?
    – rubo77
    Oct 14, 2020 at 6:04
  • Sure, but why did you add the empty selektor here?
    – rubo77
    Oct 14, 2020 at 7:37
  • @rubo77 ah, my mistake, i was thinking to put some variables in there, depending on user preference, but this was not needed for minimal working example. Oct 14, 2020 at 10:09

3 Answers 3

74

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.

0
52

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

4
  • 1
    FYI: to add a new property, you have to right-click anywhere on about:config :) Nov 24, 2019 at 11:01
  • 3
    Note, that the new value has to be integer as noted above, boolean true wont work!
    – rubo77
    Oct 14, 2020 at 6:14
  • 1
    In my case (on Fedora/Linux with GNOME) this does not work anymore in Firefox 83, as it seems – even after a restart.
    – rugk
    Nov 21, 2020 at 19:44
  • In my case, this changes the style of Firefox (menu bar) but not the style of the page...
    – tobiasBora
    Mar 1, 2022 at 13:40
4

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.