Wikimedia Apps/Android theme guidelines

Theme colors

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

Light	Sepia	Dark	Black	Attribute name	Old name	Map to
accent30	accent30	accent50	accent50		color_group_56	progressive
accent50	accent50	accent50	accent50	button_highlight_border_shape	color_group_1	progressive
accent50	accent50	white	white	themed_icon_color	color_group_2	progressive
accent50	accent50	accent75	accent75	colorAccent	color_group_3	progressive
accent90	accent90	accent20	accent20		color_group_55	background
accent90	accent90	accent30	accent30	multi_select_background_color	color_group_4	background
accent90	amate	accent30	accent20		color_group_53	background
accent90	amate	base14	base10		color_group_54	background
base10	base10	base90	base90	primary_text_color	color_group_5	primary
				android:textColorPrimary		primary
base10	base10	white	white	chart_shade1	color_group_6	primary
base10	green30	green50	green50		color_group_64	primary
base10	red30	red90	red90		color_group_66	primary
base20	masi	base90	base90	section_title_color	color_group_7	secondary
base20	masi	base80	base80	android:textColorSecondary	color_group_8	secondary
base20	masi	base80	base70	chip_text_color	color_group_9	primary
base30	base30	base30	base30	backgroundImage	color_group_10	placeholder
				colorControlActivated		placeholder
				colorControlHighlight		placeholder
				android:colorForeground		placeholder
				android:textColor (App.Button.White)		placeholder
base30	base30	white	white	page_toolbar_icon_color	color_group_71	placeholder
				page_tab_counts_shape_border		placeholder
base30	base30	base70	base70	android:textColorTertiary	color_group_11	placeholder
base30	masi	base50	base50		color_group_59	placeholder
base30	masi	base70	base70	secondary_text_color	color_group_12	placeholder
base50	base50	base50	base50	chart_shade4	color_group_13	placeholder
				colorSwitchThumbNormal (OnboardingSwitch)		placeholder
				android:textColorHint		placeholder
base50	kraft	accent75	accent75	colorPrimary	color_group_14	inactive
base70	base70	base20	base20	toc_item_background	color_group_15	border
base70	kraft	base30	base30	chart_shade5	color_group_16	border
base80	amate	base10	base4	tab_placeholder_text_color	color_group_17	border
				android:windowBackground
base80	amate	base20	base14	chip_background_color	color_group_18	border
base80	amate	base20	base18		color_group_60	border
base90	base90	base70	base70	thumb_off_color	color_group_19	background
base90	base90	base90	base90	colorSwitchThumbNormal (BottomSheetDialog)	color_group_20	background
base90	papyrus	base12	base12	android:colorBackground	color_group_21	background
base90	papyrus	base18	base14	main_status_bar_color	color_group_22	background
				main_toolbar_color		background
				page_status_bar_color		background
				page_expanded_status_bar_color		background
				page_toolbar_color		background
base90	dawn	base12	black	suggestions_background_color	color_group_23	background
black	black	white	white	toc_h1_h2_color	color_group_24	primary
				track_off_color		primary
black12	black12	white20	white20	material_theme_border_color	color_group_25	border
				list_separator_drawable		border
				list_separator_drawable_bottom_content		border
				tab_counts_shape_border		border
				thumbnail_image_placeholder (background)		border
black26	black26	black26	black26	tab_shadow_drawable	color_group_26	border
black26	black26	base10	base10	material_theme_shadow	color_group_27	shadow
black26	black26	base30	base30		color_group_61	border
black38	black38	white50	white50	material_theme_de_emphasised_color	color_group_28	placeholder
				thumbnail_image_placeholder (foreground)		placeholder
black54	black54	white	white	main_toolbar_icon_color	color_group_29	secondary
black54	black54	white50	white50		color_group_63	secondary
black54	black54	white70	white70	material_theme_secondary_color	color_group_30	secondary
black87	black87	white	white	material_theme_primary_color	color_group_40	primary
green80	green80	green20	green20		color_group_70	background
green30	green50	green50	green50	green_highlight_color	color_group_42	success
green30	green30	green50	green50		color_group_58	success
green50	green50	green50	green50	background (ActionModeGreen)	color_group_43	success
green50-10l	green50-10s	green50-10d	green50-10b		color_group_69	background
green90	none	none	none		color_group_65	background
green90	green90	green30	green30		color_group_57	addition
osage	osage	osage	osage		color_group_62	focus
red50	red30	red90	red90	colorError	color_group_44	destructive
red90	none	none	none		color_group_67	removal
yellow30	yellow30	osage	osage		color_group_68	warning
yellow50	osage	yellow90	yellow90	text_highlight_color	color_group_45	highlight
white	white	accent50	accent50	randomizer_dice_icon_color	color_group_46	background
white	white	base10	base10	chart_shade7	color_group_47	paper
white	amate	base18	base14	nav_tab_background_color	color_group_48	background
white	parchment	base12	base12	searchItemBackground	color_group_49	background
white	parchment	base14	black	paper_color	color_group_50	paper
white	parchment	base18	base14	button_background_color	color_group_51	background
				toc_scroller_button_color		background
accent75	accent75	accent75	accent75		color_group_52	progressive