Page MenuHomePhabricator

Display issue with pie chart in dark mode
Closed, ResolvedPublicBUG REPORT

Description

List of steps to reproduce (step by step, including full links if applicable):
The following is from a user reported in local community:

  • Enable dark mode in Android App
  • Go to page with a pie chart, like article List of Wikipedias.

What happens?:

image.png (1×979 px, 321 KB)
image.png (619×469 px, 49 KB)
Broken displayView from web page

What should have happened instead?:
It should not looks like that.

Software version (if not a Wikimedia wiki), browser information, screenshots, other information, etc.:
version r/2.7.50396-r-2022-03-03
OnePlus 5, LineageOS version18.1-20220411-NIGHTLY-cheeseburger

Event Timeline

This problem can be fixed by adding the background-color: initial rule to the pie chart divs which represent sectors.

Open devtools on https://en.wikipedia.org/api/rest_v1/page/mobile-html/Template:Pie_chart?theme=dark and run in console:
document.querySelectorAll('.PieChartTemplate > .thumbinner > div > div').forEach(elem => elem.style.backgroundColor = "initial")

@MSantos , @Jgiannelos

Something like that can also work as a selector just to simplify things:

.PieChartTemplate div.notheme

I think its in the spectrum of dark theme issues that should be fixed in the template first. In case this is not feasible we can patch it with a workaround.

@Elitre what's the best way to reach out to the Template Editors?

I applied the suggested fix to the template. Based on testing the issue appears fixed, but there is some mobile caching so it's not correct everywhere yet.

For future reference: template editors can be notified by leaving this template on the talk page of the template in question: https://en.wikipedia.org/wiki/Template:Edit_template-protected

This looks like its fixed, thanks @Earwig.