Page MenuHomePhabricator

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

Assigned To
Authored By
Aug 14 2017, 3:16 PM
Referenced Files
F11702755: image.png
Dec 8 2017, 9:46 PM
F11702737: image.png
Dec 8 2017, 9:46 PM
F11702720: image.png
Dec 8 2017, 9:46 PM
F11177839: image.png
Dec 4 2017, 4:45 PM
F11177843: image.png
Dec 4 2017, 4:45 PM
F11177198: image.png
Dec 4 2017, 4:01 PM
F11177223: image.png
Dec 4 2017, 4:01 PM
"Like" token, awarded by Mholloway.


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


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 #222222Base4-Pitch Black #101418
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 Base0-Pure Black #000000
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
Feed - Black.png (3×720 px, 1 MB)
Main view
Black.png (1×720 px, 67 KB)
Article sample
Article - full example - Black.png (5×720 px, 1 MB)
Dialog over article
Black - Article.png (1×720 px, 114 KB)
Reference pane
Article - citation multiple - Black.png (1×720 px, 125 KB)

Theme selection:

New 'Black' theme option in the font & theme panel
Article - Theme panel - with Black.png (1×720 px, 128 KB)
Settings item
Settings.png (640×360 px, 47 KB)
Settings theme change screen
Theme changer - Settings subscreen.png (640×360 px, 45 KB)

Event Timeline

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

There is indeed demand for it:;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.

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.

dark mode play movies.png (1×720 px, 186 KB)

dark mode play movies 1.png (1×720 px, 424 KB)

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.

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).

@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.

@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.

@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...

@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.

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

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

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

image.png (1×1 px, 1 MB)
image.png (1×1 px, 530 KB)

Theme selection:

image.png (1×1 px, 223 KB)


image.png (1×1 px, 315 KB)
image.png (1×1 px, 895 KB)

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

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

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%
Black.png (1×720 px, 67 KB)
Actual: status bar is black
image.png (1×1 px, 314 KB)

Status bar over article lead image:

Expected: status bar is from transparent to Black@26% (more transition detail on T163595)
status and toolbar transition 1a [online-lead-img-scrolldown].gif (640×360 px, 550 KB)
(open fullscreen to see transition)
Actual: status bar is Base12 (#27292D)
image.png (1×1 px, 1 MB)

@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?

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.

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

@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.

@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):

image.png (1×1 px, 354 KB)

Article status bar (also black as expected):
image.png (1×1 px, 1 MB)

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

Theme changer in Settings
image.png (1×1 px, 216 KB)
image.png (1×1 px, 287 KB)
image.png (1×1 px, 1 MB)