Change 365181 had a related patch set uploaded (by Niedzielski; owner: Sniedzielski):
[apps/android/wikipedia@master] WIP: Hygiene: consolidate dark mode theming in wikimedia-page-library

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

o/ @RHo, the focus of this task is just a chore to move all the current code, bugs and all, to a new place but I tried to also use some some of the coloring mentioned in T169148 for dark mode, improved the tech a bunch, and fixed a couple things as I went. Below I've shared some glimpses of the current state although I'm certain many other issues exist across the wikis. Considering the preexisting issues on master, if there are any blockers for merging this refactor patch please let me know. We can tackle the nonblockers in new tickets using the new framework. Thank you!

hey @Niedzielski – just a few color update tweaks to dark mode:

• 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.
• Title description "Add title description" icon color and 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)
• horizontal divider between the article title and content (I think it's "content block_0_hr" in css) is #C8CCD1 (Base70)
• update inline image captions (I think these are ".thumbcaptions" in the CSS) to use #a2a9b1 (Base50)

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

• 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

Thanks @RHo!

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

Done!

• Edit icon in dark mode uses the standard dark mode color of rgba (255,255,255,0.7)

The current design uses static images (one for the standard pencil and one for the locked pencil). I can filter these with CSS but we'll get better device support if we have a dark mode specific asset. Would you mind re-cutting these and including dark mode (and sepia!) variants? Does the ripple animation color (when you press it) stay the same?

• Title description "Add title description" icon color and link text should use #6699FF (Accent75) (not #3366cc aka Accent50 color in use in screenshots)
• Title description text color is #C8CCD1 (Base70)

I think you're referring to the page header title? That's native code. This patch is WebView stuff only.

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

• Table of contents dark mode colors:

This is in native code.

• horizontal divider between the article title and content (I think it's "content block_0_hr" in css) is #C8CCD1 (Base70)

This appears to be native code too: https://phabricator.wikimedia.org/diffusion/APAW/browse/master/app/src/main/res/layout/view_page_header.xml;86d9c3b455a2859ea404163d8b8a2bd2e581b504$63

Here's what the patch rebased on master looks like:

Looking good @Niedzielski – just noticed a couple more things related to the infobox:

• In the open infobox, the background color of the first column should also be #27292D (ie., the whole table row is the same color).

Expected:	Actual:

• the color of the 'secondary' text in the infoboxes should use the #C8CCD1 (Base70) color:

Expected:	Actual:

And I'll add the native code items to the T95080 ticket...

In T165415#3446588, @Niedzielski wrote:

The current design uses static images (one for the standard pencil and one for the locked pencil). I can filter these with CSS but we'll get better device support if we have a dark mode specific asset. Would you mind re-cutting these and including dark mode (and sepia!) variants? Does the ripple animation color (when you press it) stay the same?

I've attached SVG versions of both icons if that makes it easier?
On Light mode the icons should be rgba (0,0,0,.54) whilst on Dark (255,255,255,.70).

Thanks @RHo! @Mhurd, FYI these are the tweaks I'll be making as part of this task ^^^

Change 366743 had a related patch set uploaded (by Niedzielski; owner: Sniedzielski):
[apps/android/wikipedia@master] Update: dark mode page background and divider colors

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

Okey dokey, I think I've got it. I also pushed a couple native tweaks up but I'm sure there are more adjustments to be made in native and the WebView across all the wikis and pages.

Change 366783 had a related patch set uploaded (by Niedzielski; owner: Sniedzielski):
[mediawiki/extensions/MobileApp@master] Hygiene: consolidate edit link styling in page-library

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

Change 366784 had a related patch set uploaded (by Niedzielski; owner: Sniedzielski):
[apps/android/wikipedia@master] WIP: Hygiene: consolidate edit link styling in page-library

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

Change 365181 merged by jenkins-bot:
[apps/android/wikipedia@master] Hygiene: consolidate dark mode theming in wikimedia-page-library

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

Change 366743 merged by jenkins-bot:
[apps/android/wikipedia@master] Update: dark mode page background and divider colors

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

Change 366783 merged by jenkins-bot:
[mediawiki/extensions/MobileApp@master] Hygiene: consolidate edit link styling in page-library

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

Change 366784 merged by jenkins-bot:
[apps/android/wikipedia@master] Hygiene: consolidate edit link styling in page-library

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

Change 368828 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] Design tweak: fix rounded corners of compound reading list thumbnails.

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

Change 368828 merged by jenkins-bot:
[apps/android/wikipedia@master] Design tweak: fix rounded corners of compound reading list thumbnails.

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

Change 368837 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] Update styling of ToC for light and dark mode.

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

Change 368837 merged by jenkins-bot:
[apps/android/wikipedia@master] Update styling of ToC for light and dark mode.

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

Change 368849 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] Design tweak: update styling of page title and description.

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

Change 368849 merged by jenkins-bot:
[apps/android/wikipedia@master] Design tweak: update styling of page title and description.

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

Per group discussion: Given the original task was only meant to cover page-library integration, I'm going to close this ticket and file dark mode styles still requiring updates (eg colors on the feed, error text colors, etc) on a new task.

@Dbrant - just realized that the task description had been copied and pasted from the iOS ticket so it is not accurate with Android theme color applications. I'll create the Android specific theme color table in the new task.