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 color, borderColor, backgroundColor, 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 padding, margin, and top, left, right, bottom props.

Value	Pixels	Representation
1	4px
2	8px
3	12px
4	16px
5	20px
6	24px
7	28px
8	32px
9	36px
10	40px
12	48px
16	64px
20	80px
24	96px
32	128px
40	160px
48	192px
56	224px
64	256px
72	288px
80	320px
96	384px
px	1px
0.5	2px
1.5	6px
2.5	10px
3.5	14px

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.