# How to test preferred color scheme (Dark Mode) with Firefox

**URL:** <https://discourse.mozilla.org/t/how-to-test-preferred-color-scheme-dark-mode-with-firefox/40769>\
**Category:** Developer Tools\
**Created:** [May 24, 2019, 3:02pm UTC](https://discourse.mozilla.org/t/how-to-test-preferred-color-scheme-dark-mode-with-firefox/40769 "2019-05-24T15:02:30Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![benjamin.geese](https://avatars.discourse-cdn.com/v4/letter/b/e9a140/32.png) [@benjamin.geese](https://discourse.mozilla.org/u/benjamin.geese)\
**Post date:** [May 24, 2019, 3:02pm UTC](https://discourse.mozilla.org/t/how-to-test-preferred-color-scheme-dark-mode-with-firefox/40769/1 "2019-05-24T15:02:31Z")

</div>

As big fan of dark modes, I was very happy to learn that Firefox now supports the [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query.

However, I find i a bit hard to test this quickly on my maschine. It would be great to be able to switch between prefered color schemes similarily to the device presets in responsive mode. Or to be able to set a prefered scheme using developer tools.

I think this might be related to: [https://bugzilla.mozilla.org/show\_bug.cgi?id=1202711](https://bugzilla.mozilla.org/show_bug.cgi?id=1202711)

---

<div class="post-metadata">

**Author:** ![Nicolas\_Chevobbe](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/nicolas_chevobbe/32/28203_2.png) [@Nicolas\_Chevobbe](https://discourse.mozilla.org/u/Nicolas_Chevobbe)\
**Post date:** [May 24, 2019, 3:13pm UTC](https://discourse.mozilla.org/t/how-to-test-preferred-color-scheme-dark-mode-with-firefox/40769/2 "2019-05-24T15:13:03Z")

</div>

You can check this addon that might help you: [https://addons.mozilla.org/en-US/firefox/addon/dark-mode-website-switcher/?src=external-twitter](https://addons.mozilla.org/en-US/firefox/addon/dark-mode-website-switcher/?src=external-twitter)

---

<div class="post-metadata">

**Author:** ![nirose](https://avatars.discourse-cdn.com/v4/letter/n/439d5e/32.png) [@nirose](https://discourse.mozilla.org/u/nirose)\
**Post date:** [November 20, 2019, 8:39am UTC](https://discourse.mozilla.org/t/how-to-test-preferred-color-scheme-dark-mode-with-firefox/40769/3 "2019-11-20T08:39:46Z")

</div>

For me, the developer version on Firefox stays on light mode even if the system is on dark. It works perfectly on stable Firefox and Chrome. what could be going on?

---

<div class="post-metadata">

**Author:** ![rugkx](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/rugkx/32/19322_2.png) [@rugkx](https://discourse.mozilla.org/u/rugkx)\
**Post date:** [November 21, 2020, 7:51pm UTC](https://discourse.mozilla.org/t/how-to-test-preferred-color-scheme-dark-mode-with-firefox/40769/4 "2020-11-21T19:51:30Z")

</div>

Hi, I’m the author of the previously mentioned extension.  
First of all, great to see the extension is useful for you!

However, due to a missing API in Firefox, the manipulation is indeed more of a workaround in a hackish way and certainly not a good way. This is also stated in various places, so [read the Readme for a more detailed explanation](https://github.com/rugk/website-dark-mode-switcher#important-limitations). The [API Bugzilla request is here](https://bugzilla.mozilla.org/show_bug.cgi?id=1547818) in case you want to upvote it.

* * *

Apart from all that recent Firefox versions, however [have introduced a feature](https://stackoverflow.com/a/60481298/5008962) for developers so you can [change the style in dev-tools](https://stackoverflow.com/a/60481298/5008962). Just enable the option `devtools.inspector.color-scheme-simulation.enabled` and then you can find this button:

 ![use-color-preferences button in the CSS part of the devtools](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/2/7/276b7560b377320970fa7523c7725608e3f22cb0.png)

There was also a preference `ui.systemUsesDarkTheme` for globally forcing the dark style, but somehow that did not work for me in Firefox 83.

---

<div class="post-metadata">

**Author:** ![sebastianz](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/sebastianz/32/22087_2.png) [@sebastianz](https://discourse.mozilla.org/u/sebastianz)\
**Post date:** [March 7, 2021, 8:34pm UTC](https://discourse.mozilla.org/t/how-to-test-preferred-color-scheme-dark-mode-with-firefox/40769/5 "2021-03-07T20:34:02Z")

</div>

Note that the color scheme simulation feature is [enabled by default starting from Firefox 87](https://bugzilla.mozilla.org/show_bug.cgi?id=1692272).

The UI got changed and there are now two buttons for enabling dark or light color scheme simulation:

 ![Color scheme simulation buttons](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/1/1/11bb396665f736ae81d5e5042da9d6b5e4123d6d.png)

Note that the UI for it [might still change in the future](https://github.com/firefox-devtools/ux/issues/129).

Sebastian

---

<div class="post-metadata">

**Author:** ![phlaym](https://avatars.discourse-cdn.com/v4/letter/p/e47774/32.png) [@phlaym](https://discourse.mozilla.org/u/phlaym)\
**Post date:** [May 8, 2021, 7:55am UTC](https://discourse.mozilla.org/t/how-to-test-preferred-color-scheme-dark-mode-with-firefox/40769/6 "2021-05-08T07:55:15Z")

</div>

Huh, this doesn’t seem to work for addon popup debugging. If I switch both to light, the page itself and the addon popup via the devtools-toolbox, the page turns light but my popup stays dark and a `matchMedia('(prefers-color-scheme: dark)')` in the addon console still returns true

---

<div class="post-metadata">

**Author:** ![jscher2000](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/jscher2000/32/28202_2.png) [@jscher2000](https://discourse.mozilla.org/u/jscher2000)\
**Post date:** [May 8, 2021, 2:48pm UTC](https://discourse.mozilla.org/t/how-to-test-preferred-color-scheme-dark-mode-with-firefox/40769/7 "2021-05-08T14:48:46Z")

</div>

> [@phlaym](#):
>
> addon popup debugging

It’s tricky. You can use the about:debugging page to open the Inspector for an extension, disable auto-close of pop-ups, open the popup, switch the focus of the Inspector and then use the Rules panel. [Debugging | Firefox Extension Workshop](https://extensionworkshop.com/documentation/develop/debugging/)

It might be simpler to modify the global preference.

(1) In a new tab, type or paste **about:config** in the address bar and press Enter/Return. Click the button accepting the risk.

(2) In the search box in the page, type or paste the new preference name

**ui.systemUsesDarkTheme**

(3) On the bar with the bolded preference name, click the radio button next to Number and click the + button to add the preference. Then Firefox should display the new value.

(4) Set the value as desired (double-click to edit if necessary) and click the blue checkmark button to save the change.

- 0 =\> Light
- 1 =\> Dark
- 2 =\> No Preference