Page MenuHomePhabricator

Consolidate light and dark mode color scheme on Android
Closed, ResolvedPublic

Description

Color palette - Android

Element(s)Light themeDark theme
Background & fill colors
BaseBase80-Gray #EAECF0Base10-Darkest Gray #222222
Article dropdowns, Text fields, and Text areasBase90-Snow White #F8F9FABase12-Exosphere Gray #27292D
"Paper" for Articles, Cards, Bottom sheets, DialogsBase100-White #FFFFFFBase14-Thermosphere Gray #2E3136
Article bottom toolbarBase18-Mesosphere #43464ABase18-Mesosphere #43464A
Article stack app barBase90-Snow White #F8F9FABase18-Mesosphere #43464A
App chromeAccent50-Ink Blue #3366ccAccent30-Dark Blue #2A4B8D
Primary form-fields, Primary action buttons/iconsAccent50-Ink Blue #3366CCAccent75-Stratosphere Blue #6699FF
Full-color borders and rulesBase70-Lighter Gray #C8CCD1Base20-Dark Gray #54595d
Full-color secondary iconsBase20-Dark Gray #54595dBase70-Lighter Gray #C8CCD1
Destructive background (error highlight color)Red50-Foundation Red #DD3333Red75-Sunset Red #FF6E6E
Warning background (warning highlight color)Yellow30-Yellow #AC6600Yellow50-Foundation Yellow #FFCC33
Highlight/Positive background (success messages, highlights)Green30-Green #14866DGreen50-Foundation Green #00AF89
Text colors
Primary (Body text, headings, Article titles)Base10-Darkest Gray #222222Base90-Snow White #F8F9FA
Section title (Card titles, list headings)Base20-Dark Gray #54595dBase90-Snow White #F8F9FA
Secondary (Subheaders and captions, wikidata descriptions)Base30-Foundation Gray #72777DBase70-Lighter Gray #C8CCD1
Link (links, some list headings)Accent50-Ink Blue #3366ccAccent75-Stratosphere Blue #6699FF
Destructive text (error messages, red links)Red50-Foundation Red #DD3333Red75-Sunset Red #FF6E6E
Highlight/Positive text (success messages, highlights)Green30-Green #14866DGreen50-Foundation Green #00AF89
Material theme opacity element colors
Material theme Primary (text and icons)Black@87% rgba(0,0,0,0.87)White@100% rgba(255,255,255,1.0)
Material theme Secondary (text and icons)Black@54% rgba(0,0,0,0.54)White@70% rgba(255,255,255,0.70)
Material theme Disabled/De-emphasised (text and icons)Black@38% rgba(0,0,0,0.38)White@50% rgba(255,255,255,0.50)
Material theme borders and rules (text fields, component dividers, etc)Black@12% rgba(0,0,0,0.12)White@20% rgba(255,255,255,0.20)
Material theme Shadow (general translucent black where components do not have a shadow defined)Black@26% rgba(0,0,0,0.26)

Color guides

Android Light and Dark color palette.png (3×3 px, 596 KB)

Theme assets

Android dark and light theme.png (2×1 px, 331 KB)

Example screens

Example light and dark screens.png (1×3 px, 2 MB)

Event Timeline

hi @Sharvaniharan - I've filled in the sheet with corresponding colors where available, and left notes for rows in which more info is required. Happy to jump on a hangout to go over those rows when you're free.

Change 376788 had a related patch set uploaded (by Sharvaniharan; owner: Sharvaniharan):
[apps/android/wikipedia@master] UX: Consolidate Light and Dark modes

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

Change 376788 merged by jenkins-bot:
[apps/android/wikipedia@master] UX: Consolidate Light and Dark modes

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

Change 378747 had a related patch set uploaded (by Sharvaniharan; owner: Sharvaniharan):
[apps/android/wikipedia@master] WIP : Consolidate Light and Dark mode colors

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

Change 378747 merged by jenkins-bot:
[apps/android/wikipedia@master] Consolidate Light and Dark mode colors

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

Change 379774 had a related patch set uploaded (by Sharvaniharan; owner: Sharvaniharan):
[apps/android/wikipedia@master] WIP: Design consolidation

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

Change 379774 merged by jenkins-bot:
[apps/android/wikipedia@master] Design consolidation

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

RHo updated the task description. (Show Details)
RHo updated the task description. (Show Details)