Page MenuHomePhabricator

Investigate elements that MAY need special handling in Dark Mode
Closed, DeclinedPublic

Description

This task is for noting down items that may need to be addressed individually in the Night Mode stylesheet (currently available in https://phabricator.wikimedia.org/T221425#5129052). Note that we're not looking to fix every single odd color artifact that can be found. We should focus on elements that:

  • Are common and important, like link colors or the Publish button.
  • Or elements where colors themselves have an established meaning, like redlinks, or are identified with our brand.
  • Make the UI or the content unreadable.
  • Are controlled by the common MediaWiki styles (i.e., not templates or styles created for individual wikis, which can be fixed by the individual wikis).

For each issue you want to describe, use the format below: describe the problem, given an example URL, your name, and leave room for discussion. Take issues that need more discussion to the sections below, or we can make a separate task if they require anything more than a simple fix.

  • Image files with transparent backgrounds, specifically SVGs – T234111

Wikipedia logos

Problem

  • The logo is a particular case in point of the problem above. We can exempt the file, but the names of the wikis are in black.

Example URL

Discussion

  • Do we have any other ideas for handling this element? If not, Danny says he’s not opposed to the reversed logo if it's the best option. I don't think we want to remake hundreds of images.

Tables that use colors in cells

Problem
  • Some tables use color to denote specific ideas, like temperature (see screenshot).
Example URL

Who reported?

Discussion
  • It appears that the iOS app just strips the color from all tables. Is that possible? Is that a good solution? This may be something that users should fix by tailoring the styles for their template so that they respond to Dark mode.

Screen Shot 2019-04-30 at 10.18.33 AM.png (955×1 px, 306 KB)

Name of element

Problem
Example URL

Who reported?

Discussion

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
jmatazzoni renamed this task from Research elements that may need special handling in the css to Decide which elements need special handling in the Dark Mode css.Apr 29 2019, 10:58 PM
jmatazzoni added a project: Epic.
jmatazzoni updated the task description. (Show Details)
jmatazzoni updated the task description. (Show Details)

I'm moving this report down to the discussions area because a) I don't know who reported it (this section names writers) and b) I don't see the problem. So if you reported the "Image overlay" problem, please describe what you're seeing. Thanks.

Image overlay

Problem
  • Seems like this isn’t being handled by the general inversion. There’s also a flash of an inverted image while it’s loading.
Example URL
Discussion

Embedded (mapframe) maps are reversed.

I added kartographer maps as an exclusion with https://en.wikipedia.org/wiki/Special:Diff/895354313. Hope this is okay!

Wikipedia logo SVGs

It's actually a PNG (though I think we should be using SVGs, but I digress). I don't think there's a solution to uninvert just the logo and not the text, outside creating new assets for every logo, and, even if we're only talking about Wikipedias, that's 300+ logos. I think it may be best to just invert it as you see now. Personally I think it looks really cool :) Also pay mind that communities may override the logo for certain events, such as protest blackouts, and milestones of reaching N million articles, etc.

jmatazzoni renamed this task from Decide which elements need special handling in the Dark Mode css to Investigate elements that MAY need special handling in the Dark Mode css.May 3 2019, 5:46 PM

In T222111#5156425, @MusikAnimal wrote:

Embedded (mapframe) maps are reversed.

I added kartographer maps as an exclusion with https://en.wikipedia.org/wiki/Special:Diff/895354313. Hope this is okay!

Great work Leon! Looks good to me.

I don't know if we can do anything, but I do see one issue: if I'm in Dark Mode, the map on the page is not inverted, which is perfect. But if I click on that map to pop it up for an expanded view, THAT popup map is inverted (and now I don't have the switch on the page to turn Dark Mode off). Here's a page where you can see what I mean. Is that beyond our control?

I don't know if we can do anything, but I do see one issue: if I'm in Dark Mode, the map on the page is not inverted, which is perfect. But if I click on that map to pop it up for an expanded view, THAT popup map is inverted (and now I don't have the switch on the page to turn Dark Mode off). Here's a page where you can see what I mean. Is that beyond our control?

Done with https://en.wikipedia.org/wiki/Special:Diff/895357090

Hi @alexhollender, I've been thinking of this as something you were working on, but just realized I didn't assign it to you. So I just did. I also renamed it, to make it more clear that this is not just a holding tank for stuff we've observed, but an "investigation" ticket. Please look into these issues and either:

  • Just solve the issue in your CSS (and then make note here that the issue was solved).
  • Add some discussion saying why you don't think the issue can be solved or should be solved.
  • Or make a ticket so we can find out if any of the engineers have ideas for a solution to that issue.

Of course, this should not preclude others from offering their solutions or ideas. At the moment, the issues that seem the most in-scope for our purposes are:

  • SVG files with clear backgrounds
  • Darkened colors for some images (though this could be considered a feature by some...)

I've removed the issue below from the Description. I'm just making a note here to record that this was an issue, but that we've solved it.

SOLVED Embedded Maps

Problem
  • Embedded (mapframe) maps are reversed.
Example URL

I've removed this from the Description and am putting this here to record that it was reported and that @alexhollender fixed it, as far as I can see.

SOLVED Image flash when click for enlargemnt

Problem

When you click to expand an image, there’s a flash of an inverted image while the bigger image is loading.

Example URL

Who reported?

  • @alexhollender
Volker_E renamed this task from Investigate elements that MAY need special handling in the Dark Mode css to Investigate elements that MAY need special handling in Dark Mode.Sep 25 2019, 10:30 PM
Volker_E updated the task description. (Show Details)

Declining since this was about finding edge cases on WMF wikis, where dark-mode is unlikely to ever be deployed.

For other installations, users should simply add the .mw-no-invert CSS class to whatever they don't want inverted. A wiki might decide to have a template for this, say Template:No-invert with some content like <div class="mw-no-invert">{{{1}}}</div>. Then it could easily be used around other content.