Page MenuHomePhabricator

Pages utilising the {{n/a}} template render text in a barely readable colour in dark mode on Android app
Closed, DuplicatePublicBUG REPORT

Description

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

What happens?:
All parts of the table which use the {{n/a}} template render the text in dark gray, barely distinguishable from its surroundings when in dark or black theme

What should have happened instead?:
It should be rendered in a lighter shade of gray

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

Other information (browser name/version, screenshots, etc.): Wikipedia Beta version 2.7.50449-beta-2023-07-31, Android 13

Screenshot_2023-08-09-19-44-53-297_org.wikipedia.beta.png (1×1 px, 148 KB)

Event Timeline

Dbrant subscribed.

This is because the {{N/A}} template (and many of the other elements in that table) declares its own explicit inline background color (#ececec) and explicit text color (#2c2c2c).
Our Dark mode logic attempts to guess which table backgrounds can be safely removed, but is unfortunately sometimes not 100% successful.

Our general recommendation is to discourage using explicit (hard-coded) background and text colors in templates, unless absolutely necessary. And if the element really does require a specific background color, you can add a CSS class called notheme, which will exclude it from the Dark mode transformation.

In the case of the {{N/A}} template, the hard-coded text color can probably be removed without any perceptible difference.