[Feature request] 'Black' mode on Android
Closed, ResolvedPublic

Description

User story

As a reader in low-light and low-power, I want the lowest lighting possible for reading on Android.
Per user feedback from https://github.com/wikimedia/apps-android-wikipedia/commit/05b321f926d9e7f8d905672362f43f9981af0ad4#commitcomment-23632057

Proposed

Create a "Black" color theme with black #000000 used as the predominant background color under text in the app.

Design details:
This could be achieved with minimal additions to the color schema defined in T172984:

Color palette - Android

Element(s)Light themeDark themeBlack theme
Background & fill colors
BaseBase80-Gray #EAECF0Base10-Darkest Gray #222222Base0-Pure Black #000000
Article dropdowns, Text fields, and Text areasBase90-Snow White #F8F9FABase12-Exosphere Gray #27292DAs per Dark theme
"Paper" for Articles, Cards, Bottom sheets, DialogsBase100-White #FFFFFFBase14-Thermosphere Gray #2E3136Proposed new color Base4-Pitch Black #101418
Article bottom toolbarBase18-Mesosphere #43464ABase18-Mesosphere #43464ABase14-Thermosphere Gray #2E3136
Article stack app bar (chrome)Base90-Snow White #F8F9FABase18-Mesosphere #43464ABase14-Thermosphere Gray #2E3136
App chromeAccent50-Ink Blue #3366ccAccent30-Dark Blue #2A4B8DProposed new color Accent16-Midnight Blue #1A3060
All other elements**As per Dark theme
Mocks:
Feed
Main view
Article sample
Dialog over article
Reference pane

Theme selection:

New 'Black' theme option in the font & theme panel
Settings item
Settings theme change screen
RHo created this task.Aug 14 2017, 3:16 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 14 2017, 3:16 PM

Let's see what the demand for this proves to be as the dark mode changes roll out to production.

Dbrant added a subscriber: Dbrant.Aug 23 2017, 9:04 PM

There is indeed demand for it:
https://ticket.wikimedia.org/otrs/index.pl?Action=AgentTicketZoom;TicketID=10201934

The above user also makes the point that AMOLED displays actually consume less power when the background is fully black. (i.e. when a pixel is fully black, it consumes zero power, whereas if the pixel is even slightly gray, it consumes nearly as much power as a fully white pixel)
The total power savings on such displays can be upwards of 30%, if the background is black.

RHo updated the task description. (Show Details)Aug 25 2017, 4:24 PM
RHo added a comment.Aug 25 2017, 4:59 PM

Propose leaving this in tracking for now to see if there is demand for battery-saving #000 mode from significant amount of users in general, rather than what could be initial change aversion from previous existing users of old Dark theme.
In that regard, it may be useful to track how many new users of Dark theme have made this request.

Google play movies seems to be serving as a good example for the Black mode that's expected.

Note : I consider play movies to be a living example of the missing material design guideline for Dark mode ;-]

Google play movies seems to be serving as a good example for the Black mode that's expected.

In what sense is it "black" mode? The background is decidedly not black.

Google play movies seems to be serving as a good example for the Black mode that's expected.

In what sense is it "black" mode? The background is decidedly not black.

Sorry, my mistake. I should have stated it as,

I guess the Dark theme of Google play movies seems to be serving as a good example for the Black mode that's expected by the users of the app.

On wondering a little about the reason why a lot of people didn't like the new dark mode I came up with the following hypothesis.

Hypothesis
IIRC, the colors chosen for the dark theme of articles is partly influenced by the colors used by the dark theme of the iOS app. It seems that those colors were good for the screens of the i-devices as most of them have a retina display (or) something similar. This fact doesn't hold for the android devices as they have all kind of screens ranging from the LCDs, LEDs to the AMOLEDs etc. The new dark mode colors for articles seem to be working out well in some screens while not working out well for others. So, something has to be done about this!

Not sure how correct that hypothesis was.

+4 requests for this from OTRS (and several more from the Play Store reviews).

+1 for this.

RHo updated the task description. (Show Details)Nov 23 2017, 11:26 PM
RHo updated the task description. (Show Details)Nov 27 2017, 7:55 PM

@RHo In the Mock screenshots, the background color of the article content is still not black. Shouldn't the "paper" color be defined as fully black? This is the color that becomes the background of the article, as well as feed cards, list items, etc.

RHo added a comment.Nov 27 2017, 9:34 PM

@Dbrant - since the article is a layer like the cards over the app background, it needs to still be slightly lighter, else the cards will blend into the background. It is still almost completely black though and much darker than the dark mode background.

@RHo As noted previously, OLED displays will benefit from a black mode only if the pixels are fully black. If they are even slightly gray, the power savings is lost.

RHo added a comment.Nov 27 2017, 10:08 PM

@Dbrant - If we make both the card and background #000; we lose the separation between the layers of content. One way to maintain this distinction could be to swap the "Base" and "Paper" colors being used for Black theme, but it really depends on whether we are saying power savings is the main driver for this Black theme vs brightness on AMOLED screens.

@RHo Are there any users who are asking for a darker-but-not-quite-black background? I've read again through all of our user feedback on Dark mode, and all of the feedback specifically asks for a fully-black background, with many of these reviews mentioning power savings as an additional benefit, as well as comfortable nighttime reading. If we're going to add a black mode, I think it needs to be black...

RHo added a comment.Nov 27 2017, 11:17 PM

@Dbrant - I disagree with the assessment that "all of the feedback asks for a fully-black background". Much of the Play store reviews posted talk about generally wanting it more black like the old version (which itself was not black) over the dark grey of the revised dark mode, but do not specify #000 black.

Having said that, we can do what I suggested earlier and use #101418 for 'Base' and #000 for 'paper' in Black mode since it does sound like power savings is an important enough factor for implementing this FR.

Change 393757 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] [SUPER WIP] Black theme.

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

RHo updated the task description. (Show Details)Nov 30 2017, 4:20 PM

updated task description with Black #000000 as 'Paper' instead per discussion thread.

Change 393757 merged by jenkins-bot:
[apps/android/wikipedia@master] Black theme.

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

RHo added a comment.Dec 4 2017, 12:45 PM

hey @Dbrant - this is looking great. Only thing that I noticed is that the status bar background should appear black (since it's meant to be Black@20% opacity) on the article view.
Article view - just need to change status bar color

Theme selection:

Feed:

Change 394989 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] Design tweak for black theme.

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

Change 394989 merged by jenkins-bot:
[apps/android/wikipedia@master] Design tweak for black theme.

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

RHo added a comment.Dec 4 2017, 4:01 PM

hey @Dbrant - whilst the status bar on the scrolled article view is now appearing as expected, now the status bar elsewhere is not as expected.

Feed (and other screens where it uses the primary app bar color):

Expected: status bar is Black@26%
Actual: status bar is black

Status bar over article lead image:

Expected: status bar is from transparent to Black@26% (more transition detail on T163595)
(open fullscreen to see transition)
Actual: status bar is Base12 (#27292D)
Dbrant added a comment.Dec 4 2017, 4:13 PM

@RHo d'oh, I think I misread your original comment. I'll change the status bar color back to the dark-blue everywhere else. But in the article activity, we currently don't have a fully-transparent status bar in any case (it's not currently feasible to make it transparent). Should it be black at all times, when expanded and collapsed?

RHo added a comment.Dec 4 2017, 4:16 PM

I see @Dbrant - sure, let's make it black for now throughout in the article activity.
Related: was there a task/FR request hide the status bar along with the app bar and bottom article toolbar on scroll?

Change 395032 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] One more tweak to black mode.

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

Change 395032 merged by jenkins-bot:
[apps/android/wikipedia@master] One more tweak to black mode.

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

Dbrant added a comment.Dec 4 2017, 4:32 PM

@RHo I'm not seeing a task for making the status bar transparent. Ideally this should be a task to start using a CollapsingToolbarLayout in the article activity, but it's currently prohibitively difficult to do this when used in conjunction with a WebView. It's further complicated if we also want to create a permanent blue bar for indicating offline status, and also support the Essential phone, which treats the status bar in a nonstandard way.

RHo added a comment.Dec 4 2017, 4:45 PM

@Dbrant - making the status bar transparent is captured as part of T163595 in the backlog, but I can separate that out if you think it is unclear... As for a separate task to hide the status bar in the article activity, is it possible to hide the status bar only still keep the 'offline' bar shown?

Otherwise new patch LGTM:
Feed (black as expected):


Article status bar (also black as expected):

LGTM on Nexus 5 (6.0.1) Wikipedia 2.7.220-alpha-2017-12-08.

Theme changer in Settings
Feed
article
Dbrant closed this task as Resolved.Dec 8 2017, 10:01 PM