Steps to replicate the issue (include links if applicable):

• Use Android Dark theme and applying it to the Wikipedia app
• View a math article such as the Navier Stokes Equation entry
• Look for box which in black on white theme is rendered as black text on a medium grey. Observe in Dark theme it renders as white text on a very light grey background leaving the text nearly entirely unreadible

What happens?:

Equations can become complete illegible in the dark theme especially when ambient lighting is high such as when using day/night responsive theme and dark theme is on in a well-lit room after sunset.

The application of the dark theme seems to simply render white and blacks by merely using the inverse of their density (or subtracting 256 from their default value). Thus white FFFFFF becomes 000000, a dark grey say 111111 may become EEEEEE near white, etc. This method does not account for the relative difficulty of distinguishing lighter more white like values from each other compared to darker grays and black. Thus the shaded box becomes a lighter gray with white text on top of it which is very hard to read.

Highlighting the text and formula makes the text portion legible (see second photo) however the math formula is not effectively highlighted and the white text remains obscured.

This happens to a worse degree on some other pages where the text appears not to be rendered at all when a transparent background was used to render the formula in a vector image format. In those cases the formula does not reverse in color and remains black text rendered on a black background and is indistinguishable entirely. Here too highlight will only highlight the image box and not show the formula or allow it to be copied and pasted as text.

What should have happened instead?:

Hopefully a way can be found to render these either as white text on black to match the theme. Alternatively, a white box could be placed under transparent formula with black text in dark mode to allow the black text to be viewed against the black background as they have a box below them in z-space layers.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

Chrome Webview on Android 12

Other tickets exist for similar problems but were designated low-priority as they dont appear to recognize the severity that the information is at times entirely obscured due to theme problems