Page MenuHomePhabricator

debug toolbar not readable in night mode
Closed, ResolvedPublicBUG REPORT

Description

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

  • Set $wgDebugToolbar = true;
  • Visit a page with night mode (?useskin=vector-2022&vectornightmode=night or ?useskin=minerva&minervanightmode=night)

What happens?:
The text of the debug toolbar at the end of the page is in white, but the background is also white.

What should have happened instead?:
The night mode should apply

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia): master

Other information (browser name/version, screenshots, etc.):

Event Timeline

Jdlrobson moved this task from Backlog to Web (MediaWiki) on the dark-mode board.
Jdlrobson subscribed.

I am not sure who maintains this but I will happily review any patch that attempts to fix this! Thanks for the report!

Change #1055641 had a related patch set uploaded (by Theprotonade; author: Theprotonade):

[mediawiki/core@master] Make debug toolbar dark mode compatible

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

Hi @Jdlrobson, I just put in a patch for this. However, do you think the rest of the CSS (apart from the colours) needs to use the codex tokens too (like border width, perhaps)? Maybe that is for a different task? :)

I don't like the design changes currently proposed in the patch. The debug toolbar is not exactly a pinnacle of visual design, but I think this makes it worse. In particular, useful visual distinctions are removed (e.g. between table headers and cells, or between the debug bar itself and the background of the page), while trivial ones are emphasized (e.g. between odd and even table rows). I hope we can find some Codex tokens that do a better job.

BeforeAfter
Screenshot 2024-07-22 at 21-26-14 Blank page - Testwiki.png (676×3 px, 72 KB)
Screenshot 2024-07-22 at 21-26-46 Blank page - Testwiki.png (676×3 px, 71 KB)
Screenshot 2024-07-22 at 21-26-20 Blank page - Testwiki.png (676×3 px, 169 KB)
Screenshot 2024-07-22 at 21-26-50 Blank page - Testwiki.png (676×3 px, 167 KB)
Screenshot 2024-07-22 at 21-26-24 Blank page - Testwiki.png (676×3 px, 143 KB)
Screenshot 2024-07-22 at 21-26-53 Blank page - Testwiki.png (676×3 px, 142 KB)
Screenshot 2024-07-22 at 21-26-28 Blank page - Testwiki.png (676×3 px, 116 KB)
Screenshot 2024-07-22 at 21-26-56 Blank page - Testwiki.png (676×3 px, 110 KB)
Screenshot 2024-07-22 at 21-26-33 Blank page - Testwiki.png (676×3 px, 132 KB)
Screenshot 2024-07-22 at 21-27-00 Blank page - Testwiki.png (676×3 px, 131 KB)

Thanks for the review @matmarex, I have changed my patch with tokens that match the initial colours better.

Thanks, I think it looks much better! Screenshots of the final version for reference:

BeforeFinal
Screenshot 2024-07-22 at 21-26-14 Blank page - Testwiki.png (676×3 px, 72 KB)
Screenshot 2024-07-25 at 02-13-42 Blank page - Testwiki.png (676×3 px, 72 KB)
Screenshot 2024-07-22 at 21-26-20 Blank page - Testwiki.png (676×3 px, 169 KB)
Screenshot 2024-07-25 at 02-13-48 Blank page - Testwiki.png (676×3 px, 188 KB)
Screenshot 2024-07-22 at 21-26-24 Blank page - Testwiki.png (676×3 px, 143 KB)
Screenshot 2024-07-25 at 02-13-52 Blank page - Testwiki.png (676×3 px, 145 KB)
Screenshot 2024-07-22 at 21-26-28 Blank page - Testwiki.png (676×3 px, 116 KB)
Screenshot 2024-07-25 at 02-13-56 Blank page - Testwiki.png (676×3 px, 115 KB)
Screenshot 2024-07-22 at 21-26-33 Blank page - Testwiki.png (676×3 px, 132 KB)
Screenshot 2024-07-25 at 02-14-00 Blank page - Testwiki.png (676×3 px, 133 KB)

Change #1055641 merged by jenkins-bot:

[mediawiki/core@master] Make debug toolbar dark mode compatible

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