Version: 3.0.7

Default Theme

The theme object is where you define your application's color palette, type scale, font stacks, breakpoints, border radius values, and more.

Theming in NativeBase is based on the Styled System Theme Specification

Colors#

You can add a theme.colors object to provide colors for your project. By default these colors can be referenced by the colorborderColorbackgroundColor, etc.. props.

We recommend adding a palette that ranges from 50 to 900. Tools like Smart Swatch, Palx are available to generate these palettes.

Singletons

White
#FFFFFF
Black
#000000
LightText
#FFFFFF
DarkText
#27272a

Rose

Rose 50
#fff1f2
Rose 100
#ffe4e6
Rose 200
#fecdd3
Rose 300
#fda4af
Rose 400
#fb7185
Rose 500
#f43f5e
Rose 600
#e11d48
Rose 700
#be123c
Rose 800
#9f1239
Rose 900
#881337

Pink

Pink 50
#fdf2f8
Pink 100
#fce7f3
Pink 200
#fbcfe8
Pink 300
#f9a8d4
Pink 400
#f472b6
Pink 500
#ec4899
Pink 600
#db2777
Pink 700
#be185d
Pink 800
#9d174d
Pink 900
#831843

Fuchsia

Fuchsia 50
#fdf4ff
Fuchsia 100
#fae8ff
Fuchsia 200
#f5d0fe
Fuchsia 300
#f0abfc
Fuchsia 400
#e879f9
Fuchsia 500
#d946ef
Fuchsia 600
#c026d3
Fuchsia 700
#a21caf
Fuchsia 800
#86198f
Fuchsia 900
#701a75

Purple

Purple 50
#faf5ff
Purple 100
#f3e8ff
Purple 200
#e9d5ff
Purple 300
#d8b4fe
Purple 400
#c084fc
Purple 500
#a855f7
Purple 600
#9333ea
Purple 700
#7e22ce
Purple 800
#6b21a8
Purple 900
#581c87

Violet

Violet 50
#f5f3ff
Violet 100
#ede9fe
Violet 200
#ddd6fe
Violet 300
#c4b5fd
Violet 400
#a78bfa
Violet 500
#8b5cf6
Violet 600
#7c3aed
Violet 700
#6d28d9
Violet 800
#5b21b6
Violet 900
#4c1d95

Indigo

Indigo 50
#eef2ff
Indigo 100
#e0e7ff
Indigo 200
#c7d2fe
Indigo 300
#a5b4fc
Indigo 400
#818cf8
Indigo 500
#6366f1
Indigo 600
#4f46e5
Indigo 700
#4338ca
Indigo 800
#3730a3
Indigo 900
#312e81

Blue

Blue 50
#eff6ff
Blue 100
#dbeafe
Blue 200
#bfdbfe
Blue 300
#93c5fd
Blue 400
#60a5fa
Blue 500
#3b82f6
Blue 600
#2563eb
Blue 700
#1d4ed8
Blue 800
#1e40af
Blue 900
#1e3a8a

LightBlue

LightBlue 50
#f0f9ff
LightBlue 100
#e0f2fe
LightBlue 200
#bae6fd
LightBlue 300
#7dd3fc
LightBlue 400
#38bdf8
LightBlue 500
#0ea5e9
LightBlue 600
#0284c7
LightBlue 700
#0369a1
LightBlue 800
#075985
LightBlue 900
#0c4a6e

Cyan

Cyan 50
#ecfeff
Cyan 100
#cffafe
Cyan 200
#a5f3fc
Cyan 300
#67e8f9
Cyan 400
#22d3ee
Cyan 500
#06b6d4
Cyan 600
#0891b2
Cyan 700
#0e7490
Cyan 800
#155e75
Cyan 900
#164e63

Teal

Teal 50
#f0fdfa
Teal 100
#ccfbf1
Teal 200
#99f6e4
Teal 300
#5eead4
Teal 400
#2dd4bf
Teal 500
#14b8a6
Teal 600
#0d9488
Teal 700
#0f766e
Teal 800
#115e59
Teal 900
#134e4a

Emerald

Emerald 50
#ecfdf5
Emerald 100
#d1fae5
Emerald 200
#a7f3d0
Emerald 300
#6ee7b7
Emerald 400
#34d399
Emerald 500
#10b981
Emerald 600
#059669
Emerald 700
#047857
Emerald 800
#065f46
Emerald 900
#064e3b

Green

Green 50
#f0fdf4
Green 100
#dcfce7
Green 200
#bbf7d0
Green 300
#86efac
Green 400
#4ade80
Green 500
#22c55e
Green 600
#16a34a
Green 700
#15803d
Green 800
#166534
Green 900
#14532d

Lime

Lime 50
#f7fee7
Lime 100
#ecfccb
Lime 200
#d9f99d
Lime 300
#bef264
Lime 400
#a3e635
Lime 500
#84cc16
Lime 600
#65a30d
Lime 700
#4d7c0f
Lime 800
#3f6212
Lime 900
#365314

Yellow

Yellow 50
#fefce8
Yellow 100
#fef9c3
Yellow 200
#fef08a
Yellow 300
#fde047
Yellow 400
#facc15
Yellow 500
#eab308
Yellow 600
#ca8a04
Yellow 700
#a16207
Yellow 800
#854d0e
Yellow 900
#713f12

Amber

Amber 50
#fffbeb
Amber 100
#fef3c7
Amber 200
#fde68a
Amber 300
#fcd34d
Amber 400
#fbbf24
Amber 500
#f59e0b
Amber 600
#d97706
Amber 700
#b45309
Amber 800
#92400e
Amber 900
#78350f

Orange

Orange 50
#fff7ed
Orange 100
#ffedd5
Orange 200
#fed7aa
Orange 300
#fdba74
Orange 400
#fb923c
Orange 500
#f97316
Orange 600
#ea580c
Orange 700
#c2410c
Orange 800
#9a3412
Orange 900
#7c2d12

Red

Red 50
#fef2f2
Red 100
#fee2e2
Red 200
#fecaca
Red 300
#fca5a5
Red 400
#f87171
Red 500
#ef4444
Red 600
#dc2626
Red 700
#b91c1c
Red 800
#991b1b
Red 900
#7f1d1d

WarmGray

WarmGray 50
#fafaf9
WarmGray 100
#f5f5f4
WarmGray 200
#e7e5e4
WarmGray 300
#d6d3d1
WarmGray 400
#a8a29e
WarmGray 500
#78716c
WarmGray 600
#57534e
WarmGray 700
#44403c
WarmGray 800
#292524
WarmGray 900
#1c1917

TrueGray

TrueGray 50
#fafafa
TrueGray 100
#f5f5f5
TrueGray 200
#e5e5e5
TrueGray 300
#d4d4d4
TrueGray 400
#a3a3a3
TrueGray 500
#737373
TrueGray 600
#525252
TrueGray 700
#404040
TrueGray 800
#262626
TrueGray 900
#171717

Gray

Gray 50
#fafafa
Gray 100
#f4f4f5
Gray 200
#e4e4e7
Gray 300
#d4d4d8
Gray 400
#a1a1aa
Gray 500
#71717a
Gray 600
#52525b
Gray 700
#3f3f46
Gray 800
#27272a
Gray 900
#18181b

Dark

Dark 50
#18181b
Dark 100
#27272a
Dark 200
#3f3f46
Dark 300
#52525b
Dark 400
#71717a
Dark 500
#a1a1aa
Dark 600
#d4d4d8
Dark 700
#e4e4e7
Dark 800
#f4f4f5
Dark 900
#fafafa

CoolGray

CoolGray 50
#f9fafb
CoolGray 100
#f3f4f6
CoolGray 200
#e5e7eb
CoolGray 300
#d1d5db
CoolGray 400
#9ca3af
CoolGray 500
#6b7280
CoolGray 600
#4b5563
CoolGray 700
#374151
CoolGray 800
#1f2937
CoolGray 900
#111827

BlueGray

BlueGray 50
#f8fafc
BlueGray 100
#f1f5f9
BlueGray 200
#e2e8f0
BlueGray 300
#cbd5e1
BlueGray 400
#94a3b8
BlueGray 500
#64748b
BlueGray 600
#475569
BlueGray 700
#334155
BlueGray 800
#1e293b
BlueGray 900
#0f172a

Typography#

To manage Typography options, the theme object supports the following keys:

  • fonts (font families)
  • fontSizes
  • fontWeights
  • lineHeights
  • letterSpacings
const typography = {
letterSpacings: {
xxs: -1.5,
xs: -0.5,
sm: 0,
md: 0.1,
lg: 0.15,
xl: 0.25,
'2xl': 0.4,
'3xl': 0.5,
'4xl': 1.25,
'5xl': 1.5,
},
lineHeights: {
none: 1,
shorter: 1.25,
short: 1.375,
base: 1.5,
tall: 1.625,
taller: '2',
3: '12px',
4: '16px',
5: '20px',
6: '24px',
7: '28px',
8: '32px',
9: '36px',
10: '40px',
},
fontWeights: {
hairline: 100,
thin: 200,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900,
},
fonts: {
heading: '',
body: '',
mono: '',
},
fontSizes: {
xxs: 10,
xs: 12,
sm: 14,
md: 16,
lg: 18,
xl: 20,
'2xl': 24,
'3xl': 30,
'4xl': 36,
'5xl': 48,
'6xl': 60,
'7xl': 72,
'8xl': 96,
'9xl': 128,
},
};
xxs
The quick brown fox jumped over the lazy dog.
xs
The quick brown fox jumped over the lazy dog.
sm
The quick brown fox jumped over the lazy dog.
md
The quick brown fox jumped over the lazy dog.
lg
The quick brown fox jumped over the lazy dog.
xl
The quick brown fox jumped over the lazy dog.
2xl
The quick brown fox jumped over the lazy dog.
3xl
The quick brown fox jumped over the lazy dog.
4xl
The quick brown fox jumped over the lazy dog.
5xl
The quick brown fox jumped over the lazy dog.
6xl
The quick brown fox jumped over the lazy dog.
7xl
The quick brown fox jumped over the lazy dog.
8xl
The quick brown fox jumped over the lazy dog.
9xl
The quick brown fox jumped over the lazy dog.

Size#

The size key allows you to customize the global spacing and sizing scale for your project. By default these spacing value can be referenced by the paddingmargin, and topleftrightbottom props.

Value Pixels Representation
14px
28px
312px
416px
520px
624px
728px
832px
936px
1040px
1248px
1664px
2080px
2496px
32128px
40160px
48192px
56224px
64256px
72288px
80320px
96384px
px1px
0.52px
1.56px
2.510px
3.514px

Shadows#

The shadow key allows you to customize the global box shadow for your project.

export default {
0: {
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.18,
shadowRadius: 1.0,
elevation: 1,
},
1: {
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
elevation: 2,
},
2: {
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.22,
shadowRadius: 2.22,
elevation: 3,
},
3: {
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.23,
shadowRadius: 2.62,
elevation: 4,
},
4: {
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
5: {
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 3,
},
shadowOpacity: 0.27,
shadowRadius: 4.65,
elevation: 6,
},
6: {
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 3,
},
shadowOpacity: 0.29,
shadowRadius: 4.65,
elevation: 7,
},
7: {
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.3,
shadowRadius: 4.65,
elevation: 8,
},
8: {
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.32,
shadowRadius: 5.46,
elevation: 9,
},
9: {
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 5,
},
shadowOpacity: 0.34,
shadowRadius: 6.27,
elevation: 10,
},
};

Still confused? You can always explore here.