Wikimedia Apps/Android theme guidelines

From MediaWiki.org
Jump to navigation Jump to search

Theme colors[edit]

The Android app utilizes colors adapted from the main WMF color palette. See the current version of the WMF color palette here: https://design.wikimedia.org/style-guide/visual-style_colors.html

Android theme color usage[edit]

Element(s) Light theme Dark theme Black theme
Background & fill colors
Base Base80-Gray #EAECF0 Base10-Darkest Gray #222222 Base4-Pitch BlackGray #101418
Article dropdowns, Text fields, and Text areas Base90-Snow White #F8F9FA Base12-Exosphere Gray #27292D As per Dark theme
"Paper" for Articles, Cards, Bottom sheets, Dialogs Base100-White #FFFFFF Base14-Thermosphere Gray #2E3136 Base0-Pure Black #000000
Bottom toolbar Base18-Mesosphere #2E3136 Base18-Mesosphere #43464A As per Dark theme
Article stack chrome, Search bar Base90-Snow White #F8F9FA Base18-Mesosphere #43464A Base14-Thermosphere Gray #2E3136
App chrome Accent50-Ink Blue #3366cc Accent30-Dark Blue #2A4B8D Accent16-Midnight Blue #1A3060
Primary form-fields, Primary action buttons/icons Accent50-Ink Blue #3366CC Accent75-Stratosphere Blue #6699FF As per Dark theme
Full-color secondary icons Base20-Dark Gray #54595d Base70-Lighter Gray #C8CCD1 As per Dark theme
Full-color borders and rules Base70-Lighter Gray #C8CCD1 Base20-Dark Gray #54595d As per Dark theme
Destructive background (error highlight color) Red50-Foundation Red #DD3333 Red75-Sunset Red #FF6E6E As per Dark theme
Warning background (warning highlight color) Yellow30-Yellow #AC6600 Yellow50-Foundation Yellow #FFCC33 As per Dark theme
Highlight/Positive background (success messages, highlights) Green30-Green #14866D Green50-Foundation Green #00AF89 As per Dark theme
Text colors
Primary (Body text, headings, Article titles) Base10-Darkest Gray #222222 Base90-Snow White #F8F9FA As per Dark theme
Section title (Card titles, list headings) Base20-Dark Gray #54595d Base90-Snow White #F8F9FA As per Dark theme
Secondary (Subheaders and captions, wikidata descriptions) Base30-Foundation Gray #72777D Base70-Lighter Gray #C8CCD1 As per Dark theme
Link (links, some list headings) Accent50-Ink Blue #3366cc Accent75-Stratosphere Blue #6699FF As per Dark theme
Destructive text (error messages, red links) Red50-Foundation Red #DD3333 Red75-Sunset Red #FF6E6E As per Dark theme
Highlight/Positive text (success messages, highlights) Green30-Green #14866D Green50-Foundation Green #00AF89 As per Dark theme
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) As per Dark theme
Material theme Secondary (text and icons) Black@54% rgba(0,0,0,0.54) White@70% rgba(255,255,255,0.70) As per Dark theme
Material theme Disabled/De-emphasised (text and icons) Black@38% rgba(0,0,0,0.38) White@50% rgba(255,255,255,0.50) As per Dark theme
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) As per Dark theme
Material theme Shadow (general translucent black where components do not have a shadow defined) Black@26% rgba(0,0,0,0.26)

Android color themes[edit]

Theme assets[edit]