This is a (Firefox) add-on (WebExtension) that lets you invert the website's color scheme by inverting/changing the prefers-color-scheme media feature of CSS without requiring you to change the whole system style setting.
Test websites:
- https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode
- https://webkit.org/
- https://pinafore.social/
- https://s.codepen.io/aardrian/debug/NmoQdN
- http://adrianroselli.com/
- https://emojipedia.org/
- https://bugzilla.mozilla.org/
This extension only works with modern Firefox v67 or higher, as this is the first version that supports this feature.
Note this is quite restricted in real-world usage. If you just want to have dark pages (with a light system style), it will usually work fine, but everything else is hardly possible. Also there may be edge-cases, where things break. (But please report bugs, anyway. It's good to know what/if websites break.) To improve this situation Firefox would need to get a proper API.
The technical story on why this is so hard to overwrite CSS like that in an add-on is described on Stackoverflow by me, but basically I needed extract the CSS manually and manually apply it afterwards. And it requires an not-so-easy JS overwrite needed, too, BTW…
That's why I've requested a better API on Bugzilla (feel free to upvote, if you want this, too!).
For this reason, the add-on is currently named “Dark Website Forcer”. This makes it more obvious to the user, that it cannot force a light website.
You can easily get involved in this FLOSS project and any help is certainly appreciated. Here are some ideas:
- 📃 Translate this add-on into multiple languages!
- 🐛 Fix some easy issues and get started in add-on development (or just try out the development version)
- 💡 Or check out some other add-on issues (or translate them).
Or, in any case, support us by spreading the word! ❤️
If you want to find out how this add-on currently works on a technical level, have a look at this Stackoverflow answer. I've explained it there in detail.