Page MenuHomePhabricator

Color update tweaks to dark mode
Closed, ResolvedPublic

Assigned To
Authored By
NHarateh_WMF
Jul 31 2017, 11:18 PM
Referenced Files
F9630797: image.png
Sep 18 2017, 8:29 PM
F9510403: image.png
Sep 13 2017, 7:47 PM
F9510147: image.png
Sep 13 2017, 7:21 PM
F8998831: image.png
Aug 9 2017, 4:22 PM
F8998827: image.png
Aug 9 2017, 4:22 PM
F8917996: image.png
Jul 31 2017, 11:18 PM

Description

Done in T165415:

  • - The background color of the article should use #2E3136 per the T169148 update, with the footer background being #222 (Base10). See the Zeplin mocks for the Dark vs Light versions.
  • - update inline image captions (I think these are ".thumbcaptions" in the CSS) to use #a2a9b1 (Base50)

What's left:

  • Title description "Add title description" icon color should use #6699FF (Accent75)
  • Title description "Add title description" link text should use #6699FF (Accent75) (not #3366cc aka Accent50 color in use in screenshots)
  • Title description text color is #C8CCD1 (Base70)
  • Edit icon in dark mode uses the standard dark mode color of rgba (255,255,255,0.7) - ie White@70%
  • horizontal divider between the article title and content (I think it's "content block_0_hr" in css) is #C8CCD1 (Base70)
  • The reading list thumbnail should have 2dp radii on all sides, but in dark mode you can see the white square corners (circled in magenta):

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

  • Table of contents dark mode colors:
  • TOC background color #43464A
  • Active TOC element color #54595D (Base20)
  • Article title and H2 sections text color #F8F9FA (Base90)
  • H3 subsection text color #C8CCD1 (Base70)

See Zeplin mock for redlines https://zpl.io/QsHxx

Event Timeline

hi @Dbrant - A few colors still looking not quite right:

image.png (172×532 px, 33 KB)

  • Title description "Add title description" icon color and link text should use dark mode link color #6699FF (Accent75)
  • Edit icon in dark mode uses the standard dark mode material-secondary color of rgba (255,255,255,0.7)

image.png (272×538 px, 36 KB)

  • TOC Article title should be in Dark mode primary text color (Base90)
Dbrant added a subscriber: Dbrant.

Change 377339 had a related patch set uploaded (by Mholloway; owner: Mholloway):
[apps/android/wikipedia@master] Design tweak: Update ToC header text color

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

Change 377353 had a related patch set uploaded (by Mholloway; owner: Mholloway):
[apps/android/wikipedia@master] Design tweak: update header edit button tint

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

Hi @RHo, as on T95080, it looks like the text you pointed out that should be @accent75 in dark mode now is. Patches are up for review on the other two.

Change 377353 merged by jenkins-bot:
[apps/android/wikipedia@master] Design tweak: update header edit button tint

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

Change 377339 merged by jenkins-bot:
[apps/android/wikipedia@master] Design tweak: Update ToC header text color

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

hi @Mholloway - just a couple of things left on this task:

  • it's actually the icon next to the "Add title description" text which is still not in the expected Accent75 color

image.png (326×954 px, 74 KB)

  • The edit icon in dark mode is in the White@70% (which is meant to correspond to the expected edit icon color in Light mode of Black@54%)

Weirdly I noticed that the latest build v2.6.203-alpha-2017-09-13 on my Pixel (8.0.0) does show the correct colors:

image.png (724×2 px, 257 KB)

However the very same build on my Nexus (6.0.1) I am still seeing older unexpected colors... is this a weird device-specific issue?

hi @Mholloway - just a couple of things left on this task:

  • it's actually the icon next to the "Add title description" text which is still not in the expected Accent75 color

image.png (326×954 px, 74 KB)

  • The edit icon in dark mode is in the White@70% (which is meant to correspond to the expected edit icon color in Light mode of Black@54%)

Change 378088 had a related patch set uploaded (by Mholloway; owner: Mholloway):
[apps/android/wikipedia@master] Update: fix article subtitle compound drawable tint on API <23

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

Change 378088 merged by jenkins-bot:
[apps/android/wikipedia@master] Update: fix article subtitle drawable tint on non-current versions

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

Change 378129 had a related patch set uploaded (by Mholloway; owner: Mholloway):
[apps/android/wikipedia@master] Fix header edit button tint (once more, with feeling)

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

Change 378129 merged by jenkins-bot:
[apps/android/wikipedia@master] Fix header edit button tint (once more, with feeling)

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

OK! The remaining problems here should be resolved.