Page MenuHomePhabricator

Add night mode inversion code with a feature flag, so we can test it out
Closed, InvalidPublic

Description

Result

A user can click to change the site to Dark Mode. They can click again to go back to Light Mode.

Implementation

Provide a simple link at the top of the page where things like "Preferences" are now for any user (logged in or logged out) to click. Clicking this will toggle the application of the CSS below to the page. The current mode should be saved in localStorage so the user's preference is maintained on that client across browser/client sessions. We believe this will work for Mobile Web as well as Desktop Web.

Code

@Jdlrobson and @Esanders created this CSS in T206094 which we could use as a base:

$('#p-logo').clone().addClass('mw-no-invert').insertAfter('#p-logo').css({position:'absolute',top:'0',height:'113px',overflow:'hidden'})
body, img, video, svg, .mw-no-invert {
	filter: invert( 1 ), hue-rotate( 180 deg );
}

Risks

We anticipate that there will be parts of some pages that fail with this simple of a change. So, we want to implement this with a feature flag and activate it for wikis such that we can test. It'll also let us quickly remove it if there is widespread upset.

Temporary interface?

I don't care how the code gets turned on or off; do what is simplest. I imagine we could just have one url parameter for "night" and another for "day." Or, if we want to add a temporary UI, just make it so anyone using the special url parameter sees a simple toggling link in the top nav, with the words Day/Night, as shown below:

Event Timeline

Restricted Application added a project: Community-Tech. · View Herald TranscriptApr 18 2019, 8:06 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

What Wikipedia should we use for this test? Or since this will not be seen by anyone, can we just put it on all of them? Opinions? @aezell @alexhollender? @Mooeypoo?

jmatazzoni updated the task description. (Show Details)

What Wikipedia should we use for this test? Should we just do it on Test or Beta? Or should we pick a real Wikipedia, to give a better sense of the variety of content we'll be seeing (graphs, maps, videos, etc.)? Opinions? @aezell @alexhollender? @Mooeypoo?

aezell updated the task description. (Show Details)Apr 18 2019, 8:48 PM
aezell added subscribers: Jdlrobson, Esanders.
aezell updated the task description. (Show Details)Apr 18 2019, 8:54 PM

We should start with Test. Once it has a feature flag and is fully deployed, enabling/disabling on any wiki is a trivial SWAT deploy of the config change.

MusikAnimal added a subscriber: MusikAnimal.EditedApr 18 2019, 8:56 PM

As we were saying on Slack, we don't need to build something into MediaWiki to test what this looks like. It's just CSS. You can try this tiny script, which uses the same approach:

mw.loader.load( ‘//en.wikipedia.org/w/index.php?title=User:MusikAnimal/nightpedia.js&action=raw&ctype=text/javascript’ );

put that at the bottom of https://meta.wikimedia.org/wiki/Special:MyPage/common.js then look for the "Nightpedia" link at the top. The script will work on all wikis.

Note however that when you navigate from page to page there is a brief period where it goes back to light mode before becoming dark again. This is only because it's a user script that doesn't have the luxury of being the first thing to be executed. So basically, use your imagination and pretend there is no flashing :)

jmatazzoni closed this task as Resolved.Apr 18 2019, 9:52 PM
jmatazzoni changed the task status from Resolved to Invalid.

This is now invalid. The result of the "invert" isn't high enough fidelity for what we want. We should strive towards something more like what the mobile app does. Maybe we can learn from their code?

This is now invalid. The result of the "invert" isn't high enough fidelity for what we want. We should strive towards something more like what the mobile app does. Maybe we can learn from their code?

I've written a new ticket for designing the color scheme that explicitly names the iOS scheme as a target/model for our design (they did a lot of research).

We still want to manage this project as simply as possible, however. So if anyone can give Alex Hollender, the designer, advice re. things that will make implementation harder or easier, that would be very helpful. Please add your comments to the new ticket, T221425.

This is now invalid. The result of the "invert" isn't high enough fidelity for what we want.

Could you elaborate on the methodology you used for testing this? If invert doesn't work for this use case there are infinite number of other filters we can try. Was CSS filters the problem or the output of the invert function?