Support website's native dark mode

Firefox 67 introduced the new prefers-color-scheme CSS media feature. (It’s not currently available for any other browsers that support browser/WebExtensions.)

With that websites can detect a dark system mode and adjust their design.

It would obviously be great, if you could integrate that, somehow. And there are many possibilities.

---

That said, I’ve already tried that (to force a particular design) and it is really not a nice thing to implement. At least forcing the black design works, as this is how websites likely implement it, but anything else is likely not really possible…

So this is rather a proof-of-concept (although it works quite fine if you just want to force the websites to use their native black design.).

Test the add-on here!

Source code: https://github.com/rugk/website-dark-mode-switcher/

What is easy is:

• get the system state and apply the add-on based on it. (just a .matchMedia query and you know it)

What is hard is:

• forcing websites to use a particular design

You may also just disable this add-on on sites, where you detect it used. It opens many possibilities/ideas…

Edit: Due to new Firefox APIs the v2 of the linked extension is much more powerful and now can easily and reliably force the dark or light mode on websites.

---

Test sites are linked in the add-on, but here again:

• https://webkit.org/blog/
• https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode

[haselwarter]

This issue has been open for almost 3 years, and by now prefers-color-scheme is supported by a good part of the web. Dark mode detection doesn’t have to do magic, but making sure it works on websites that use meta tags correctly would be a good first step. It’d be a real improvement towards integrating Dark Reader with the contemporary ecosystem.

[flying-sheep]

Respect the user’s choice to explicitly choose a light theme for GitHub only.