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

Color usage overview[edit]

Light Sepia Dark Black Attribute name New attribute name (to review)
accent30
accent30
accent50
accent50
color_group_56
accent50
accent50
accent50
accent50
button_highlight_border_shape color_group_1
accent50
accent50
white
white
themed_icon_color color_group_2
accent50
accent50
accent75
accent75
colorAccent color_group_3
accent90
accent90
accent20
accent20
color_group_55
accent90
accent90
accent30
accent30
multi_select_background_color color_group_4
accent90
amate
accent30
accent20
color_group_53
accent90
amate
base14
base10
color_group_54
base10
base10
base90
base90
primary_text_color color_group_5
android:textColorPrimary
base10
base10
white
white
chart_shade1 color_group_6
base20
masi
base90
base90
section_title_color color_group_7
base20
masi
base80
base80
android:textColorSecondary color_group_8
base20
masi
base80
base70
chip_text_color color_group_9
base30
base30
base30
base30
backgroundImage color_group_10
colorControlActivated
colorControlHighlight
android:colorForeground
android:textColor (App.Button.White)
base30
base30
white
white
page_toolbar_icon_color color_group_11
page_tab_counts_shape_border
base30
base30
base70
base70
android:textColorTertiary color_group_11
base30
masi
base50
base50
color_group_59
base30
masi
base70
base70
secondary_text_color color_group_12
base50
base50
base50
base50
chart_shade4 color_group_13
colorSwitchThumbNormal (OnboardingSwitch)
android:textColorHint
base50
kraft
accent75
accent75
colorPrimary color_group_14
base70
base70
base20
base20
toc_item_background color_group_15
base70
kraft
base30
base30
chart_shade5 color_group_16
base80
amate
base10
base4
tab_placeholder_text_color color_group_17
android:windowBackground
base80
amate
base20
base14
chip_background_color color_group_18
base90
base90
base70
base70
thumb_off_color color_group_19
base90
base90
base90
base90
colorSwitchThumbNormal (BottomSheetDialog) color_group_20
base90
papyrus
base12
base12
android:colorBackground color_group_21
base90
papyrus
base18
base14
main_status_bar_color color_group_22
main_toolbar_color
page_status_bar_color
page_expanded_status_bar_color
page_toolbar_color
base90
dawn
base12
black
suggestions_background_color color_group_23
black
black
white
white
toc_h1_h2_color color_group_24
track_off_color
black12
black12
white20
white20
material_theme_border_color color_group_25
list_separator_drawable
list_separator_drawable_bottom_content
tab_counts_shape_border
thumbnail_image_placeholder (background)
black26
black26
black26
black26
tab_shadow_drawable color_group_26
black26
black26
base10
base10
material_theme_shadow color_group_27
black38
black38
white50
white50
material_theme_de_emphasised_color color_group_28
thumbnail_image_placeholder (foreground)
black54
black54
white
white
main_toolbar_icon_color color_group_29
black54
black54
white70
white70
material_theme_secondary_color color_group_30
black87
black87
white
white
material_theme_primary_color color_group_40
main_toolbar_title_color
green30
green50
green50
green50
green_highlight_color color_group_42
green30
green30
green50
green50
color_group_58
green50
green50
green50
green50
background (ActionModeGreen) color_group_43
green90
green90
green30
green30
color_group_57
red50
red30
red75
red75
colorError color_group_44
yellow50
osage
yellow90
yellow90
text_highlight_color color_group_45
white
white
accent50
accent50
randomizer_dice_icon_color color_group_46
white
white
base10
base10
chart_shade7 color_group_47
white
amate
base18
base14
nav_tab_background_color color_group_48
white
parchment
base12
base12
searchItemBackground color_group_49
white
parchment
base14
black
paper_color color_group_50
white
parchment
base18
base14
button_background_color color_group_51
toc_scroller_button_color
accent75
accent75
accent75
accent75
color_group_52

Colors names and values[edit]

Color name Value (hex) Value (rgba)
amate
#e1dad1
accent10
#132347
accent16
#1A3060
accent20
#223966
accent30
#2a4b8d
accent50
#36c
accent75
#69f
accent90
#eaf3ff
base4
#101418
base10
#222
base12
#27292d
base14
#2e3136
base18
#43464a
base20
#54595d
base30
#72777d
base50
#a2a9b1
base70
#c8ccd1
base80
#eaecf0
base90
#f8f9fa
black
#000
black12
#1f000000 rgba(0,0,0,0.12)
black26
#42000000 rgba(0,0,0,0.26)
black38
#61000000 rgba(0,0,0,0.38)
black54
#8A000000 rgba(0,0,0,0.54)
black87
#DE000000 rgba(0,0,0,0.87)
dawn
#F2EBE1
green30
#14866d
green50
#00af89
green90
#d5fdf4
find_in_page
#FFFF00
find_in_page_active
#FF9632
yellow50
#fc3
yellow90
#fef6e7
kraft
#cbc8c1
masi
#646059
osage
#ff9500
osage_translucent
#80ff9500 rgba(255,149,0,0.5)
papyrus
#f0e6d6
parchment
#f8f1e3
red30
#b32424
red50
#d33
red75
#ff6e6e
white
#fff
white20
#33ffffff rgba(255,255,255,0.2)
white50
#80ffffff rgba(255,255,255,0.5)
white70
#b3ffffff rgba(255,255,255,0.7)