Page MenuHomePhabricator

Help adapting rowiki tables to dark mode
Closed, ResolvedPublic

Description

I need some help adapting rowiki CSS (specifically tables) to dark mode. Historically, the vast majority of layouting on our wiki has been done with tables. When matched with dark mode, this has lead to hard to read text in high-traffic pages (see examples below).

I tracked down most of those to the definition of color-base in this file and I would like some guidance on how to solve them in one (or few) changes. Thank you!

Examples

https://ro.wikipedia.org/wiki/Pagina_principal%C4%83 (see the links)
https://ro.wikipedia.org/wiki/Format:Schimb%C4%83ri_recente (see the text)
https://ro.wikipedia.org/wiki/Format:Navbox_periodic_table (see the header links in top-left corner)

Affected CSS rules

File: https://ro.wikipedia.org/w/load.php?debug=1&lang=ro&modules=ext.wikimediamessages.styles&only=styles&skin=vector-2022

html.skin-theme-clientpref-night .mw-parser-output [style*='background'] {
    /* @color-base */
    color: #202122;
  }
  html.skin-theme-clientpref-night body.ns-0 table:not( .infobox ):not( .navbox-inner ):not( .navbox ) [bgcolor] a:not( .mw-selflink ),
  html.skin-theme-clientpref-night body.ns-0 table:not( .infobox ):not( .navbox-inner ):not( .navbox )[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a:not( .mw-selflink ),
  html.skin-theme-clientpref-night body.ns-0 table:not( .infobox ):not( .navbox-inner ):not( .navbox ) th[style*="background"]:not( [style*="transparent"] ):not( [style*="inherit"] ) a:not( .mw-selflink ),
  html.skin-theme-clientpref-night body.ns-0 table:not( .infobox ):not( .navbox-inner ):not( .navbox ) td[style*="background"]:not( [style*="transparent"] ):not( [style*="inherit"] ) a:not( .mw-selflink ),
  html.skin-theme-clientpref-night body.ns-0 table:not( .infobox ):not( .navbox-inner ):not( .navbox ) tr[style*="background"]:not( [style*="transparent"] ):not( [style*="inherit"] ) td a:not( .mw-selflink ) {
    color: var(--color-base-fixed, #202122);
    text-decoration: underline;
  }

Event Timeline

Change #1074258 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/WikimediaMessages@master] Do not apply table styling rules to Main page

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

Jdlrobson subscribed.

https://ro.wikipedia.org/wiki/Pagina_principal%C4%83 (see the links)

for Main page: this seems like a bug our side. To workaround this, in the mean time, you can remove the style attributes in that page. Tracked in T375245.

https://ro.wikipedia.org/wiki/Format:Schimb%C4%83ri_recente (see the text)
https://ro.wikipedia.org/wiki/Format:Navbox_periodic_table (see the header links in top-left corner)

Please remove all background:none; and background:transparent; rules from that tables. They are unnecessary and are making dark mode think the rows have colored backgrounds.

Done, fixed, thank you!

Just thinking, if the code detects colored background, can't we automate the contrast? Something like https://stackoverflow.com/questions/21290669/auto-contrast-font-color-to-background

Done, fixed, thank you!

Just thinking, if the code detects colored background, can't we automate the contrast? Something like https://stackoverflow.com/questions/21290669/auto-contrast-font-color-to-background

Feel free to experiment. The main reason we don't fiddle with this, is that colors might have some kind of meaning. For example, if the background colors in the table represent political party or sports teams colors, contrasting those colors is breaking that information.

Note: The code is not really detecting colored background - it is detecting the use of a style attribute with the string background in it. This will detect false positives such as background: transparent, background-size and even commented out:

/*do not apply background here!*/
TheDJ claimed this task.
TheDJ reassigned this task from TheDJ to Strainu.
TheDJ moved this task from Backlog to Web: Content issues on the dark-mode board.
TheDJ subscribed.