Page MenuHomePhabricator

Investigate texts hard to read on dark themes in mobile Apps
Open, HighPublic

Description

Use the following examples as guide for the investigation:

  • list of celebrity death match episodes (black text on black background in episode descriptions )
  • list of secret world of Alex Mack episodes (white text on white background in headers)
  • west wing (season 7) episodes section (black text on black background in headers)
  • for Matt Davidson, should his name in the info box be white (this seems to transcribe over to most athlete pages universally)
  • Francisco lindor, there’s a “medals” in that infographic that’s similarly obscured
  • Francisco lindor, the info box is missing the theming for the sub-boxes, in this case blue and orange
  • Andy Ashby has a lot of obscured black text in that info box in dark mode
  • nolan Ryan, the hall of fame section of the top info box has some theming issues
  • Nate mcmilllan; his coaching record table, the legend has white text on white background and is hence obscured in dark mode as well
  • baker mayfield career statistics section, table header text obscured
  • Maria Andrejczyk, the 2nd and 3rd instance of “javelin throw” is completely hidden in the top info box, only the first instance appears as it’s hyperlinked
  • Mars Volta discography page summary table has issues in dark mode with white text displaying clearly

Previous description for context

From email:

I've been using the Wikipedia Android app for a while and I've been noticing an issue lately.

Basically, whenever I'm on a page with a chart, say for example if it's an article about a TV show and there's a chart for the list of episodes, I'm noticing some of the next is hard to read. Its basically showing white text on a white background.

This is happening on multiple Android phones even using the latest app version and Android 11.

See attached screenshots, the titles of the episodes are unreadable. Its only readable when a piece of text is hyperlinked to another page.

Even if I change to the darker dark node, same thing.

Maybe there's someway of making that text or background in charts like that to grey or same as the dark node colour?

Screenshot_20210603-095055.png (2×1 px, 228 KB)

Screenshot_20210603-095049.png (2×1 px, 99 KB)

Screenshot_20210603-095636.png (2×1 px, 57 KB)

Screenshot_20210603-095512.png (2×1 px, 114 KB)

Possibly related to https://phabricator.wikimedia.org/T264687? (although this is apparently happening in all themes)

Event Timeline

Change 700919 had a related patch set uploaded (by MSantos; author: MSantos):

[mediawiki/services/mobileapps@master] mobile-html: improve notheme rules for wikitables

https://gerrit.wikimedia.org/r/700919

Change 700919 merged by jenkins-bot:

[mediawiki/services/mobileapps@master] mobile-html: improve notheme rules for wikitables

https://gerrit.wikimedia.org/r/700919

@MSantos, hi circling back again. Since I saw at least a fix was deployed today, just want to make sure you’re aware this is still of issue with most articles. While athlete pages are by far the most off, focusing solely on just TV episode page tables as this ticket does, there are still tons of episode pages that haven’t been fixed. Apologies if jumping the gun, but since I saw it was in deployed state, just wanted to make sure as we’ve already gone through 4 rounds before without it ever hitting the core examples I first sent.

@Ijm8710 Thanks for the patience and for raising the issues. I think you meant that the issues still persist as reported in T269476: [OTRS bug] Disappearing text due to custom styling, right?

We have a new deployment to make Today in order to have some changes applied, here is one link [1] in the beta cluster in case you wanna test it.

[1] https://mobileapps.wmflabs.org/en.wikipedia.org/v1/page/mobile-html/Matt_Davidson_(baseball)?theme=dark

Also, our board column names are a bit confusing, but when the deployment is done, I'll be moving the tasks to sign-off. That means that the changes we worked on are guaranteed to be deployed.

Hey @MSantos, for my last comment I was actually specifically focusing on TV episode tables as that was more specific to this thread

For example, please see
-list of celebrity death match episodes (black text on black background in episode descriptions )
-list of secret world of Alex Mack episodes (white text on white background in headers)
-west wing (season 7) episodes section (black text on black background in headers)

*note that for most of these scenarios they cover more broad instances but tried to grab an occurrence of each

As for sport pages they’re looking better (thank you) but:
-for Matt Davidson, should his name in the info box be white (this seems to transcribe over to most athlete pages universally)
-Francisco lindor, there’s a “medals” in that infographic that’s similarly obscured
-Francisco lindor, the info box is missing the theming for the sub-boxes, in this case blue and orange
-Andy Ashby has a lot of obscured black text in that info box in dark mode
-nolan Ryan, the hall of fame section of the top info box has some theming issues
-Nate mcmilllan; his coaching record table, the legend has white text on white background and is hence obscured in dark mode as well
-baker mayfield career statistics section, table header text obscured
-Maria Andrejczyk, the 2nd and 3rd instance of “javelin throw” is completely hidden in the top info box, only the first instance appears as it’s hyperlinked

Lastly, track listing page
• Mars Volta discography page summary table has issues in dark mode with white text displaying clearly

Have a good bit more, one offs but I feel these cover a good majority of the more wide-arching items. Hopefully you agree with most. Thanks for work and getting back

Hi @MSantos, would you agree with most of what’s outlined in previous comment? (Especially still a ton of black on black and white on white in TV templates and for sports, most themes are still missing in dark mode)

@Ijm8710 Thanks for all the info! I'll make a checklist with your suggestions.

I already see some that can be fixed and others that need further investigation.

MSantos renamed this task from Charts hard to read in Android app to Investigate texts hard to read on dark themes in mobile Apps.Aug 23 2021, 3:41 PM
MSantos updated the task description. (Show Details)

@MSantos any specific reason you left off the first few bullets regarding TV items for the edit above?

Also I’d classify all of em as text hard to read besides the theming one. Not sure you’re aware the themes are totally gone for a bunch of boxes in dark mode like the blue and orange for lindor (Mets)

@Ijm8710 nice catch! You can always add more to that list if you feel that's needed, the more descriptive the better, especially if you have links or images that are needed for the context.

@MSantos, I have a good bit more but I’m saving them on the back burner for now so as not to overwhelm as these cover most use cases. Will reevaluate once we make headway on the above.

Just bringing to your attention the edit I made on last comment. I’d classify all those as “text hard to read” besides one which seems like a different category. Not sure if you were or were not aware that the themes were scrapped either from change 700919 or slightly before as the themes were showing at one point. Totally understand it’s a work in progress but the ultimate hope is for dark mode to support both the themes and text once everything is looking good. Thanks

And I can provide images when asked for any of those examples. Tried to be detailed enough so that I didn’t have to bother uploading but please lmk if you need any in particular and can ammend

@MSantos, are some of these items being fixed article-by-article, one by one, rather than being addressed with a more universal approach?

Months ago I reported ted lasso had black text on black background for summary descriptions and that was fixed

But I also raised yesterday that celebrity death match has the same issue (first checkbox above)

Now that was fixed

I specifically kept a reserve, though, of other articles with the same issue and all the others are still broke. Just to see if the overarching issue is being addressed or if these are simply one-off patches

If they are indeed being fixed one-by-one that does not sound optimal as it requires us to report them every single time rather than an overarching fix.

Hi! I went through this checklist. Here is my summary:

list of celebrity death match episodes (black text on black background in episode descriptions )

Link: https://en.wikipedia.org/api/rest_v1/page/mobile-html/List_of_Celebrity_Deathmatch_episodes?theme=dark
Same as west wing (season 7) episodes section (black text on black background in headers), issue with template adjustment.


list of secret world of Alex Mack episodes (white text on white background in headers)

Link: https://en.wikipedia.org/api/rest_v1/page/mobile-html/List_of_The_Secret_World_of_Alex_Mack_episodes?theme=dark
Same as Maria Andrejczyk, the 2nd and 3rd instance of “javelin throw” is completely hidden in the top info box, only the first instance appears as it’s hyperlinked. Style was overriden in mobileapps,


west wing (season 7) episodes section (black text on black background in headers)

Link: https://en.wikipedia.org/api/rest_v1/page/mobile-html/The_West_Wing_(season_7)?theme=dark
This issue appeared while importing into article. Just need to remove |background=#000000 from the template settings while editing the article.
Template doc: https://en.wikipedia.org/wiki/Template:Episode_table


for Matt Davidson, should his name in the info box be white (this seems to transcribe over to most athlete pages universally)

Link: https://en.wikipedia.org/api/rest_v1/page/mobile-html/Matt_Davidson_(baseball)?theme=dark
Issue inside this css rule: .pcs-theme-dark :not(.notheme) span:not(.notheme)
I think, it is better to add specific class (or even style logic) inside Template to handle different text colors in heading
More information about this template here - https://en.wikipedia.org/w/index.php?title=Template:Episode_table


Francisco lindor, there’s a “medals” in that infographic that’s similarly obscured
Francisco lindor, the info box is missing the theming for the sub-boxes, in this case blue and orange

Link: https://en.wikipedia.org/api/rest_v1/page/mobile-html/Francisco_Lindor?theme=dark
Orange color is missing because of the css rule for dark/black theme in mobileapps
'Medals' heading probably should have specific class name in the Template because it is impossible to intercept this particular element on mobileapps level without consequences for other similar articles
Template: https://en.wikipedia.org/wiki/Template:Infobox_baseball_biography
This template uses Module:Infobox, Module:InfoboxImage, Module:Check for unknown parameters


Andy Ashby has a lot of obscured black text in that info box in dark mode

Link: https://en.wikipedia.org/api/rest_v1/page/mobile-html/Andy_Ashby?theme=dark
Elements with the issue receives class notheme. I'd rather add a specific inline style of a class in Template:Infobox_baseball_biography


Nolan Ryan, the hall of fame section of the top info box has some theming issues

Link: https://en.wikipedia.org/api/rest_v1/page/mobile-html/Nolan_Ryan?theme=dark
Class infobox-header has been overriden in mobieapp. However, such kind of headers can have a different background, so it's more appropriate to handle an inner text color inside template


Nate mcmilllan; his coaching record table, the legend has white text on white background and is hence obscured in dark mode as well

Link: https://en.wikipedia.org/api/rest_v1/page/mobile-html/Nate_McMillan?theme=dark
Inline style in <td style="background-color: #F2F2F2; border: 1px solid black; width:50px; text-align:center;">G</td> comes from Template. Need to add some class name to these elements to handle them on mobile html
Template example - https://en.wikipedia.org/wiki/Template:NBA_coach_statistics_legend


baker mayfield career statistics section, table header text obscured

Link: https://en.wikipedia.org/api/rest_v1/page/mobile-html/Baker_Mayfield?theme=dark
Checked 'Overall recruiting rankings' area. I can fix this by intercepting plainlist class. However, there is an inline background style there. Probably it is not a good idea to override it.
I think it is also a template-level issue.
Template: https://en.wikipedia.org/wiki/Template:College_athlete_recruit_end
Template source code: https://en.wikipedia.org/w/index.php?title=Template:College_athlete_recruit_end&action=edit
Check style="font-size:85%; background:#F5F5F5;" code there


Maria Andrejczyk, the 2nd and 3rd instance of “javelin throw” is completely hidden in the top info box, only the first instance appears as it’s hyperlinked

Link: https://en.wikipedia.org/api/rest_v1/page/mobile-html/Maria_Andrejczyk?theme=dark
Issue caused by these classes .pcs-theme-black :not(.notheme) .pcs-collapse-table-container td:not(.notheme), .pcs-theme-dark :not(.notheme) .pcs-collapse-table-container td:not(.notheme) which we added in order to highlight text inside dark table cells.


Mars Volta discography page summary table has issues in dark mode with white text displaying clearly

Link: https://en.wikipedia.org/api/rest_v1/page/mobile-html/The_Mars_Volta?theme=dark
Haven't reproduce the issue, probably all OK. Provide a screenshot, please.


My conclusion is that most of the dark theme issues lies inside inconsistent template's behavior. For example Template:Episode table can have arbitrary heading background color ( same for Template:Infobox_baseball_biography ) which can cause difficulties to handle them in mobileapps. Also, some article editors don't pay attention to the template settings and color preferences while adding a template into an article (because they create them in the desktop version with the white background). Maybe some templates should be more restrictive for styling.

cc: @MSantos , @Ijm8710

@vadim-kovalenko,

417F7BC3-6261-404A-A8BB-E7ED18BDD8FE.png (2×1 px, 1 MB)
, attaching image for Mars Volta as requested (it was a separate wiki for their discography apart from their main artist page)

The commentary on the lindor example has me curious. Why would that be any different from say “Tom Brady” who is in fact themed fine in dark mode?

I’m also curious if there are ways to address some examples more in unison rather than template by template. For example here is hard to read white text for Novak djokovic

FD61075B-A667-4BEA-B1D5-001545A56BF2.png (2×1 px, 476 KB)
. The issue seems similar to the Mars Volta example but clearly adjusting discography for musicians is a different template from tennis players.

For example when you say “I think, it is better to add specific class (or even style logic) inside Template to handle different text colors in heading” you mentioned that for the episode_table template but couldn’t that logic apply across the board to all times text appears with certain header backgrounds? Perhaps I am oversimplifying

Don’t want to jump the gun, but I’d be curious to see which of these mean they can/which are unlikely to be improved. The more universal they are, the more I’d hope they can as pages like those for athlete templates are pretty wide-ranging

@Ijm8710

attaching image for Mars Volta as requested

Yes, now I see it. Correct link is https://en.wikipedia.org/api/rest_v1/page/mobile-html/The_Mars_Volta_discography?theme=dark. Issue the same as in Maria Andrejczyk article.

Don’t want to jump the gun, but I’d be curious which of these mean they can/are unlikely to be improved. The more universal they are, the more I’d hope they can be like those affecting most athlete pages across the board

I think we need to prepare a list of these templates and then discuss about style issues with their authors

The commentary on the lindor example has me curious. Why would that be any different from say “Tom Brady” who is themed in dark mode?

Because they utilize different templates. Francisco Lindor uses Infobox baseball biography and Tom Brady Infobox NFL biography

For example when you say “I think, it is better to add specific class (or even style logic) inside Template to handle different text colors in heading” you mentioned that for the episode_table template but couldn’t that logic apply across the board to all times text appears with certain header backgrounds? Perhaps I am oversimplifying

Usually, these headers have predefined inline styles and no class to hook on it in mobileapps. Also, table structure may vary depending on template which make impossible to create a common rule for all of them.

Thanks @vadim-kovalenko

The one last thing I’ll say (this is more subjective), since you pointed out how the templates are unique, is that I do like how the theming works for NBA and NFL players more than how it is for MLB where the theming applies to the succeeding headers as opposed to the titular athlete name box

It looks a lot cleaner, especially with how it incorporates dual colors (ie the laker purple and gold for Lebron James/the packer green and gold for Aaron rodgers); it seems the MLB template instead uses a singular background theme for that one box as the secondary color is lost when you lose the theming in dark mode for the succeeding boxes

The benefit of converging the MLB template style to the other two is it may fix two issues at once (as the name box will be default grey background-see first bullet below)

-for Matt Davidson, should his name in the info box be white (this seems to transcribe over to most athlete pages universally)
-Francisco lindor, the info box is missing the theming for the sub-boxes, in this case blue and orange

@MSantos @vadim-kovalenko, I’m still very confused why it appears some of these articles are being fixed. But only as one offs and tons of other errored articles remain. Wouldn’t fixing the templates improve them in bulk? What makes them unique?

Examples of what I mean:

Template:Episode_table issues
Fixed: list of secret word of alex Mack episodes, list of celebrity death match episodes
Still broken: list of walker Texas ranger episodes

template:Infobox_baseball_biography
Fixesd: Andy Ashby
Still broken: Joel peralta

I’m providing these examples to universally improve the templates. I really don’t want to keep having to dig and find more examples as I’m providing them for bulk improvement, not one-off fixes. It’s very rare I revisit these specific random articles. But it’s extremely likely I’ll revisit pages that use them templates almost every day.

@Ijm8710 I didn't have time to take a deep look into it, but it could be just cache being refreshed slowly.

This comment was removed by Ijm8710.

@MSantos just checked the wmflabs preview pages and perhaps you’re right (if so my apologies). Was just surprising as it always appears the examples I provide are fixed ahead of the other examples that are identical. But perhaps vadim or whomever is fixing it is fastracking those examples leading to me jumping the gun🤷‍♂️

Hi @Izno! As per discussion here and this thread (check 'Calculate text color automatically depending of the table header background color' there), could you assist with Template_talk:Episode_table issue?

Regarding infoboxes: Infoboxes 'natively' support TemplateStyles (well, besides the core styles) since a month or two ago on EN.WP, so the related inline styles can be moved over to TemplateStyles and then "you" (where you is the app authors?) can just override the related classes (which are also live e.g. now it's not just generic .infobox th that you can target [and shouldn't, for infobox won't be a table forever], it's .infobox-label) in the general in dark modes. (Usually it's just headings from what I've seen, but hey, you can be more particular if you want.) A bot may be able to do it faster if someone wanted to put one together and I've had it in mind to request one, but just haven't gotten around to it.

Regarding classes elsewhere: I work on them when I see them and fancy strikes. I don't know of any coordinating place to work on making pages mobile-friendly (which is tangential but does hit one of the points, "use a single root element"). Lots of legacy to go around and it Just Works for editors (predominantly on desktop, etc. etc.), so things don't change fast...

Regarding limiting the colors (cc @Gonnym):

Is it possible to add some logic for style calculation of the table header or restrict styling of these elements? For dark/black themes in iOS/Android might happen issue with colors overlap like in this example (check Episodes section) - https://en.wikipedia.org/api/rest_v1/page/mobile-html/The_West_Wing_(season_7)?theme=dark Additional details - https://phabricator.wikimedia.org/T284327 VadimKovalenkoSNF (talk) 08:23, 6 September 2021 (UTC)

Restricting styling isn't going to fly because now you've got contrast requirements for most people (using a light skin) on one side and contrast for a very few (using a dark skin in the apps [alone]) on the other, and that requirement sandwich is not a good one. (Ever moderated a Discord server? It's like trying to get user name colors happy for both light and dark skins, something I kvetch about regularly.) That's even ignoring user desire to set their own colors. (I think T37704 should be declined for that reason alone even if I would personally be happy to see inline colors removed.)

It's not obvious to me where the burden should be to support dark themes, especially as dark themes are not in core or even in a MediaWiki extension (e.g. T122924. It's a pity CommTech punted on T26070 or wherever their version of that was - y'all need to get your shit together given you have an app that needs to care about such things already! 😄). Accordingly, I disagree that "fix the template to do fewer colors" is the correct solution.

The solution probably ultimately requires inline colors to be inverted, prefers-color-schemed, or be inherited, I just don't know where, and whether it's in pure CSS or possibly also in JavaScript or even (since you are dealing with the app) in PHP/something app-side. Some you + me holding hands options (and there may be others):

  1. There could be support in core or in the app for a class on body or html to hook on to indicate it's being viewed in a dark theme.
    1. Subsequently requires template authors to convert templates to use TemplateStyles and subsequently to know and style for that.
    2. Probably needs wide consensus because as a template author I want the name to be stable and that approach to be the preferred approach.
  2. There could be a generic class like current nomobile to indicate a certain element has been marked up with background colors that should instead have its styles be inverted, prefers-color-schemed, or be inherited (obviously with a dose of !important).
    1. This requires template authors to convert templates to calculate colors issues. Maybe a similar mountain to deal with to 1.
    2. May need a similar consensus to 1.
  3. Something like T200632 gets done.
    1. Same issues.

Separate to all those 3, you still have arbitrary uses of color in the wild you need to support that don't involve templates, so even if one of those gets picked, you need to figure out a way in the app to deal with the problem. (And once you've done that, there's no forcing function to implement any of those.) Hence my mention above that it could be app-side. There 0 reason that I can see that the app can't be the system responsible for inverting/stripping the colors of interest.

This issue is fundamentally one for MediaWiki-Core-Skin-Architecture or some other technical body to fix and/or provide direction on IMO. That direction may have already been provided somewhere among all of those linked tasks or maybe on MediaWiki wiki or Wikitech. I don't know. I do know the issue has continued to be kicked down the road, which is why you're stuck dealing with it. Maybe @Volker_E or @Jdlrobson knows something more or has feedback to give on some of those options.

Finally, regarding the episode table itself, it particularly has a class already today, though I hate the name (it's wikiepisodetable). That might get changed...

@MSantos, wanted to circle back just once more please on Infobox baseball biography vs Infobox NFL biography please.

nfl bio (see Aaron Rodgers):
both light and dark work great for top infobox👌

baseball bio (see Ronald acuna jr):
light works well, but dark doesn’t carry the themes the same way

I asked why for baseball bio in dark mode, his name box does get themed in a blue box, but the subboxes below that such as “mlb statistics (through 2021 season)” remain unthemed and vadim said this is because the templates are different

They are, but this makes little sense to me as those same subboxes theme fine for both light and dark theme for nba and nfl.

If the app can theme the subboxes in both light/dark themes for nfl/nba…
and if those subboxes are indeed themed fine in light mode for mlb…
why is it blocked out for being themed in dark mode for mlb?

It’s not as if the template itself doesn’t theme them at all and hence that’s why there’s no theming. It’s just only rendering in light while the other sports can have the render carry over

Unifying the styling of mlb templates to handle similary to nba/nfl would also have a secondary benefit so that Ronald acunas name remains readable in his top name box as well

A user reported an issue with dark/black themes on this article:
https://de.wikipedia.org/wiki/Deutschland?wprov=sfla1

Screenshot_20211129-112054.jpg (2×1 px, 554 KB)

Another place you can see this problem is on tennis scoreboards. For example on https://en.wikipedia.org/wiki/2021_Australian_Open_%E2%80%93_Men%27s_Singles, here is what the results tables look like on one of the light themes, vs one of the dark themes.

Screenshot_20220120-235534.jpg (1×720 px, 158 KB)
Screenshot_20220120-235551.jpg (1×720 px, 124 KB)