Categories

Toggle the content’s color scheme between preferring light or dark (or inheriting)

For Firefox version ≥ 95.

Minimal add-on

This is the simplest possible add-on with the least possible permissions.

Clicking the add-on action in your toolbar cycles the color scheme preference for browser content, between the following 4 values:

1. dark colors
2. light colors
3. inherit browser colors (dark or light)
4. inherit system colors (dark or light)

You can enable or disable values in the cycle from the add-on content.

Fingerprinting incompatibility

Strong fingerprinting resistance (by setting the preference privacy.resistFingerprinting) stops Firefox from disclosing your color preference to websites, which means this add-on will have no effect.

Website support

This add-on relies on the fact that websites have their own proper stylesheets for dark and light modes, for example DuckDuckGo.
An increasing number of websites now offer light and dark schemes, though you may need to select a specific option to inherit your browser’s colors, e.g. google, github, stackoverflow, and many more.

If you want to add your own dark mode to other websites, you can use user style sheet addons such as e.g. Stylus. Then you can wrap the CSS in a prefers-color-scheme media feature so it responds to this add-on’s toggle. For example:


@media (prefers-color-scheme: dark) {
/* CSS that ony applies to dark mode */
body { background: black; color: #ddd; }
}

@media (prefers-color-scheme: light) {
/* CSS that ony applies to light mode */
body { background: white; color: black; }
}