Testing Dark Mode CSS in Firefox

Posted on Mar 15, 2021
Last updated Aug 20, 2021

Because this took me way too long to figure out.


Update:

The mentioned setting is now enabled by default, starting from Firefox 87.


To whom it may concern, i.e. future me after installing Firefox on a new machine:

Firefox has a button that can simulate and toggle the prefers-color-scheme CSS media setting that enables easy testing of different themes/styles.

To enable this cool little button in the styles section of the dev tools Inspector, follow these instructions [1]:

  • Go to about:config page
  • Set devtools.inspector.color-scheme-simulation.enabled to true

References

[1] Thanks, Toastrackenigma. I don’t know why it took me so long to find your post.