Page MenuHomePhabricator

Conflicting color rules for dark mode
Closed, ResolvedPublicBUG REPORT

Description

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

  • Goto https://de.wikipedia.org/wiki/Tschernjachowsk
  • if you use a different skin, set your skin to Vector 2022 (Preferences->Appearance)
  • enable "Accessibility for Reading (Vector 2022)" (Preferences->Beta Features)
  • Switch to dark mode (Color->Dark in the toolbox on the right side)

What happens?:

  • Dark text on dark background in the infobox

What should have happened instead?:

  • Text should be in readable color.

The problem seems to be the combination of CSS rules

html.skin-theme-clientpref-night .infobox td:not(.notheme),
[...] {
 background:inherit !important;
 color:inherit !important;
 border-color:var(--border-color-subtle,#c8ccd1) !important
}

and

html.skin-theme-clientpref-night .mw-parser-output [style*="background"] {
	color: #202122;
}

The first one prevents specific color/background attribs on the table cells from having any effect, but the second rule assumes the cells have a custom background and sets a dark text color.

Event Timeline

Switch to dark mode

Hmm, how/where exactly to do that?

Switch to dark mode

Hmm, how/where exactly to do that?

Sorry for the inconvenience. I've updated the description with additional details.

This issue may overlap with T365318 as the same CSS code is mentioned there.

Jdlrobson claimed this task.

This is really a discussion that needs to be had on wiki not phabricator to get resolved. I've fixed this particular page on wiki to demonstrate how:
https://de.wikipedia.org/w/index.php?title=Vorlage%3AInfobox_Ort_in_Russland&diff=245417279&oldid=240866237

The issue here is elements defining a background without a color, the fix for which is described here:
https://www.mediawiki.org/wiki/Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis#Always_define_color_when_defining_background

So if you see similar problems, the best place to bring them up is on wikis (the more people that are aware of these problems the quicker they will get fixed).

Thanks for your help!