Theme variables Cheat sheet
Cheatsheet use values from native-base-theme/variables/platform.js
0.1. Brand colors
Variable |
Type |
Description |
Platform values
|
iOS |
Android |
brandPrimary |
color |
Brand primary color |
#007aff |
#3F51B5 |
brandInfo |
color |
Brand info color |
#62B1F6 |
#62B1F6 |
brandSuccess |
color |
Brand success color |
#5cb85c |
#5cb85c |
brandDanger |
color |
Brand danger color |
#d9534f |
#d9534f |
brandWarning |
color |
Brand warning color |
#f0ad4e |
#f0ad4e |
brandDark |
color |
Brand dark color |
#000 |
#000 |
brandLight |
color |
Brand light color |
#f4f4f4 |
#f4f4f4 |
0.2. Accordion
Variable |
Type |
Description |
Platform values
|
iOS |
Android |
headerStyle |
color |
Header color |
#edebed |
#edebed |
iconStyle |
color |
Icon color when closed |
#000 |
#000 |
contentStyle |
color |
Content color |
#f5f4f5 |
#f5f4f5 |
expandedIconStyle |
color |
Icon color when open |
#000 |
#000 |
accordionBorderColor |
color |
Header and Content border color |
#d3d3d3 |
#d3d3d3 |
0.3. Badge
Variable |
Type |
Description |
Platform values
|
iOS |
Android |
badgeBg |
color |
Badge text color |
#ed1727 |
#ed1727 |
badgeColor |
color |
Badge background color |
#fff |
#fff |
badgePadding |
number |
Badge padding |
3 |
0 |
Variable |
Type |
Description |
Platform values
|
iOS |
Android |
btnFontFamily |
font family |
Font family of button text |
System |
Roboto_medium |
btnDisabledBg |
color |
Disabled button background color |
#b5b5b5 |
#b5b5b5 |
buttonPadding |
number |
Button padding |
6 |
6 |
0.5. Card
Variable |
Type |
Description |
Platform values
|
iOS |
Android |
cardDefaultBg |
color |
Background color for card item |
#fff |
#fff |
cardBorderColor |
color |
Border color for card |
#ccc |
#ccc |
cardBorderRadius |
number |
Border Radius |
2 |
2 |
cardItemPadding |
number |
Padding between Card and CardItem |
10 |
12 |
0.6. CheckBox
Variable |
Type |
Description |
Platform values
|
iOS |
Android |
CheckboxRadius |
number |
Checkbox radius |
13 |
0 |
CheckboxBorderWidth |
number |
Checkbox border width |
1 |
2 |
CheckboxPaddingLeft |
number |
Checkbox left padding |
4 |
2 |
CheckboxPaddingBottom |
number |
Checkbox bottom padding |
0 |
5 |
CheckboxIconSize |
number |
Icon size of checkbox |
21 |
16 |
CheckboxIconMarginTop |
number |
Top margin for checkbox icon |
undefined |
1 |
CheckboxFontSize |
number |
Size of checkbox font |
23/0.9 |
17 |
DefaultFontSize |
number |
Deafault Font size |
17 |
17 |
checkboxBgColor |
color |
Background color for checkbox |
#039BE5 |
#039BE5 |
checkboxSize |
number |
Size of checkbox |
20 |
20 |
checkboxTickColor |
color |
Checkbox tick color |
#fff |
#fff |
0.7. Date Picker
Variable |
Type |
Description |
Platform values
|
iOS |
Android |
datePickerTextColor |
color |
date display color |
#000 |
#000 |
datePickerBg |
color |
Background color of modal |
transparent |
transparent |
0.8. Font
Variable |
Type |
Description |
Platform values
|
iOS |
Android |
fontFamily |
font family |
text font family |
System |
Roboto |
fontSizeBase |
number |
text font size |
15 |
15 |
Variable |
Type |
Description |
Platform values
|
iOS |
Android |
footerHeight |
number |
Height of footer |
55/89 |
55 |
footerDefaultBg |
color |
Background color for footer |
#F8F8F8 |
#F8F8F8 |
footerPaddingBottom |
number |
Bottom padding for footer |
0 |
0 |
Variable |
Type |
Description |
Platform values
|
iOS |
Android |
tabBarTextColor |
color |
Text color of tab |
#6b6b6b |
#b3c7f9 |
tabBarTextSize |
number |
Font size of tab |
14 |
11 |
activeTab |
color |
- |
#007aff |
#fff |
sTabBarActiveTextColor |
color |
- |
#007aff |
#007aff |
tabBarActiveTextColor |
color |
Text color of active tab |
#007aff |
#fff |
tabActiveBgColor |
color |
Background color of active tab |
#cde1f9 |
#3F51B5 |
Variable |
Type |
Description |
Platform values
|
iOS |
Android |
toolbarBtnColor |
color |
Button color in header |
#F8F8F8 |
#3F51B5 |
toolbarDefaultBg |
color |
Background color for header |
#F8F8F8 |
#F8F8F8 |
toolbarHeight |
number |
Height of header |
64/89 |
56 |
toolbarSearchIconSize |
number |
Icon size of header search icon |
20 |
23 |
toolbarInputColor |
number |
Input color of header |
#CECDD2 |
#fff |
searchBarHeight |
number |
Height of search bar |
30 |
40 |
searchBarInputHeight |
number |
Height of search bar input |
30 |
50 |
toolbarBtnTextColor |
color |
Button text color of header |
#007aff |
#fff |
toolbarDefaultBorder |
color |
Border color of header |
#a7a6ab |
#3F51B5 |
iosStatusbar |
string |
Theme of iOS status bar |
dark-content |
light-content |
0.12. Icon
Variable |
Type |
Description |
Platform values
|
iOS |
Android |
iconFamily |
string |
Icon Family |
Ionicons |
Ionicons |
iconFontSize |
number |
Size of icon |
30 |
28 |
iconHeaderSize |
number |
- |
33 |
24 |
Variable |
Type |
Description |
Platform values
|
iOS |
Android |
inputFontSize |
number |
Font size of input text |
17 |
17 |
inputBorderColor |
color |
Texbox border color |
#D9D5DC |
#D9D5DC |
inputSuccessBorderColor |
color |
Textbox border color with success prop |
#2b8339 |
#2b8339 |
inputErrorBorderColor |
color |
Textbox border color with error prop |
#ed2f2f |
#ed2f2f |
inputHeightBase |
number |
Height of input |
50 |
50 |
0.14. Line height
Variable |
Type |
Description |
Platform values
|
iOS |
Android |
btnLineHeight |
number |
Line height of text in button |
19 |
19 |
lineHeightH1 |
number |
Line height of H1 |
32 |
32 |
lineHeightH2 |
number |
Line height of H2 |
27 |
27 |
lineHeightH3 |
number |
Line height of H3 |
22 |
22 |
lineHeight |
number |
Default line height |
20 |
24 |
0.15. List
Variable |
Type |
Description |
Platform values
|
iOS |
Android |
listBg |
color |
Background color of list |
transparent |
transparent |
listBorderColor |
color |
Border color of list |
#c9c9c9 |
#c9c9c9 |
listDividerBg |
color |
Divider color of list |
#f4f4f4 |
#f4f4f4 |
listBtnUnderlayColor |
color |
- |
#DDD |
#DDD |
listItemPadding |
color |
Padding for list item |
10 |
12 |
listNoteColor |
color |
Color of note text |
#808080 |
#808080 |
listNoteSize |
color |
Size of note text |
13 |
13 |
listItemSelected |
color |
Color of Text and Icons when ListItem is selected |
13 |
13 |
Variable |
Type |
Description |
Platform values
|
iOS |
Android |
radioBtnSize |
number |
Size of radio button |
25 |
23 |
radioSelectedColorAndroid |
color |
Color of selected radio button |
- |
#3F51B5 |
radioBtnLineHeight |
number |
Line height of radio button |
29 |
24 |
0.17. Segment
Variable |
Type |
Description |
Platform values
|
iOS |
Android |
segmentBackgroundColor |
color |
Background color of segment |
#F8F8F8 |
#3F51B5 |
segmentActiveBackgroundColor |
color |
Background color of active segment |
#007aff |
#fff |
segmentTextColor |
color |
Color of segment text |
#007aff |
#fff |
segmentActiveTextColor |
color |
Color of active segment text |
#fff |
#3F51B5 |
segmentBorderColor |
color |
Color of segment border |
#007aff |
#fff |
segmentBorderColorMain |
color |
- |
#a7a6ab |
#3F51B5 |
0.18. Spinner
Variable |
Type |
Description |
Platform values
|
iOS |
Android |
defaultSpinnerColor |
color |
Default color for spinner |
#45D56E |
#45D56E |
inverseSpinnerColor |
color |
Inverse color for spinner |
#1A191B |
#1A191B |
0.19. Tab
Variable |
Type |
Description |
Platform values
|
iOS |
Android |
tabDefaultBg |
color |
Default background color for tab |
#F8F8F8 |
#3F51B5 |
topTabBarTextColor |
color |
Tab text color |
#6b6b6b |
#b3c7f9 |
topTabBarActiveTextColor |
color |
Active tab text color |
#007aff |
#fff |
topTabBarBorderColor |
color |
Border color for tab |
#a7a6ab |
#fff |
topTabBarActiveBorderColor |
color |
Border color for active tab |
#007aff |
#fff |
0.20. Tabs
Variable |
Type |
Description |
Platform values
|
iOS |
Android |
tabBgColor |
color |
Background color for tab container |
#F8F8F8 |
#F8F8F8 |
tabFontSize |
number |
Font size of tab |
15 |
15 |
0.21. Text
Variable |
Type |
Description |
Platform values
|
iOS |
Android |
textColor |
color |
Text color |
Ionicons |
Ionicons |
inverseTextColor |
color |
Inverse text color |
#fff |
#fff |
noteFontSize |
number |
Font size of note text |
14 |
14 |
0.22. Title
Variable |
Type |
Description |
Platform values
|
iOS |
Android |
titleFontfamily |
string |
Font family of title |
System |
Roboto_medium |
titleFontSize |
number |
Font size of title |
17 |
19 |
subTitleFontSize |
number |
Font size of subtitle |
12 |
14 |
subtitleColor |
color |
Font color of subtitle |
#8e8e93 |
#FFF |
titleFontColor |
color |
Font color of title |
#000 |
#FFF |