Page MenuHomePhabricator

Apply reading themes to article view
Closed, ResolvedPublic

Assigned To
Authored By
JMinor
Jun 28 2017, 9:47 PM
Referenced Files
F8934724: T169148 Dark.PNG
Aug 2 2017, 11:36 PM
F8934725: T169148 Sepia.PNG
Aug 2 2017, 11:36 PM
F8723754: Sepia mode color palette.png
Jul 13 2017, 6:59 PM
F8722946: Sepia mode - Article.png
Jul 13 2017, 6:59 PM
F8723729: Dark mode - Article.png
Jul 13 2017, 6:59 PM
F8723757: Dark mode color palette.png
Jul 13 2017, 6:59 PM
F8610778: Sepia mode color palette.png
Jul 3 2017, 6:54 PM
F8610779: Dark mode color palette.png
Jul 3 2017, 6:54 PM
Tokens
"Mountain of Wealth" token, awarded by JMinor.

Description

Color palette

ThemeBase backgroundChrome backgroundPaper backgroundPrimary TextSecondary TextAccent TextLinkIconMid backgroundBorderShadowTab bar shadowHRCard type backgroundCard type iconSecondary action backgroundDestructive action / errorWarning
Default#EAECF0 (Base80)#FFFFFF (Base100)#FFFFFF (Base100)#222222 (Base10)#72777D (Base30)#00AF89 (Green50)#3366CC (Accent50)#54595D (Base20)#F8F9FA (Base90)#C8CCD1 (Base70)#EAECF0 (Base80)#000 and 25% opacity#C8CCD1 (Base70)variedvaried#2A4B8D (Accent10)#DD3333 (Red50)#FFCC33 (Yellow50)
Sepia#E1DAD1 (Amate)#F8F1E3 (Parchment)#F8F1E3 (Parchment)#222222 (Base10)#646059 (Masi)#00AF89 (Green50)#3366CC (Accent50)#646059 (Masi)#F0E6D6 (Papyrus)#CBC8C1 (Kraft)#CBC8C1 (Kraft)#CBC8C1 (Kraft)#CBC8C1 (Kraft)#E1DAD1 (Amate)#646059 (Masi)#2A4B8D (Accent10)#B32424 (Red30)#FF9500 (Osage)
Dark#222222 (Base10)#43464A (Mesophere)#2E3136 (Thermosphere)#F8F9A (Base90)#C8CCD1 (Base 70)#00AF89 (Green50)#6699FF (Stratosphere)#C8CCD1 (Base 70)#27292D (Exosphere)#43464A (Mesophere)#43464A (Mesophere)#43464A (Mesophere)#C8CCD1 (Base 70)#43464A (Mesophere)#C8CCD1 (Base 70)#2A4B8D (Accent10)#FF6E6E (Red75)#ffcc33 (Yellow50)

Color guides

SepiaDark
Sepia mode color palette.png (1×899 px, 98 KB)
Dark mode color palette.png (1×899 px, 107 KB)

Mocks + Redlines in Zeplin

SepiaDark
Sepia mode - Article.png (667×375 px, 202 KB)
Dark mode - Article.png (667×375 px, 225 KB)
Zeplin: https://zpl.io/1SxY5XZeplin: https://zpl.io/Ir2pQ

Event Timeline

JMinor renamed this task from Add reading themes controls to the Settings view to Apply reading themes to article view.Jun 28 2017, 9:47 PM
JMinor created this task.
JMinor removed a project: Reading Epics.

Testing steps:

  1. Search for Ching Shih and open the article
  2. Tap the appearance control in the Toolbar (Tt)
  3. Select the middle theme (sepia)
  4. Verify the article takes on a brown appearance and looks like the mock up in the description. No need to verify that the colors are exactly right (that will be for design review).
  5. Select the right theme (dark)
  6. Verify the article takes on a dark appearance and looks like the mock up in the description. No need to verify that the colors are exactly right (that will be for design review).

Testing on iPhone 6s (iOS 10.3.3) and Wikipedia app 5.6.0 (1189). This is fixed according to the screencaps below.

T169148 Sepia.PNG (1×750 px, 786 KB)
T169148 Dark.PNG (1×750 px, 766 KB)

ABorbaWMF subscribed.

Tested on iPad Pro with iOS 10.3.3 and iPhone 7+ with iOS 10.3.3 on App 5.6.0 (1190)

Themes!

JMinor awarded a token.