[Website dark mode] Headings and menu are not visible on certain websites when turning on website dark mode

[data-sync-user]

Steps to reproduce:

1. Open Firefox on iOS.
2. Navigate to a website such as Wikipedia, CNN, or http://adora.ro .
3. Open the Hamburger menu.
4. Enable the setting Website Dark Mode.
5. Observe the page elements (headings, menu icons, etc.).

Expected behavior:

When Website Dark Mode is enabled, all page elements (including headings, menu icons, and text) should remain visible and readable with appropriate contrast.

Actual behavior:

Certain elements of the page (such as headings and menu icons) become invisible or unreadable due to black text/icons on a black background, making navigation and content interaction difficult.

Device & Build Information:

• Device: iPad Mini A17 Pro (iOS 26)
• Build version: Firefox v144.3 (63239) - release

┆Issue is synchronized with this Jira Bug

[janbrasna]

I believe FxiOS does not customize whatever @darkreader/darkreader provides — so any compatibility is up to the upstream library?

Unless the ask is to remove it, and replace with something else, or write a bespoke implementation.

[janbrasna]

Or perhaps there's some interaction between light and dark modes of the websites? (I just checked on light mode OS and it looks reasonably OK, I'll try to check again on a dark system OS to see if there's perhaps some interaction of the inverted styles on the websites and the darkreader styles?)

EDIT: Checked in dark OS and it still looks the same — besides a site logo not inverting or a random icon here and there most likely due to site implementation or interaction with the lib the results still look impressively good (verified on en.wikipedia, edition.cnn & adora.ro clicking few pages deep… couldn't find anything blatantly wrong or unusable.)