Default Tokens

Theming in @gluestack-ui/themed is based on the Styled System Theme Specification.

Colors

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

primary

primary0

#E5F1FB

primary50

#CCE9FF

primary100

#ADDBFF

primary200

#7CC2FF

primary300

#4AA9FF

primary400

#1A91FF

primary500

#0077E6

primary600

#005DB4

primary700

#004282

primary800

#002851

primary900

#011838

primary950

#000711

secondary

secondary0

#F6F6F6

secondary50

#F3F3F3

secondary100

#E9E9E9

secondary200

#DADADA

secondary300

#B0B0B0

secondary400

#737373

secondary500

#5F5F5F

secondary600

#525252

secondary700

#404040

secondary800

#262626

secondary900

#171717

secondary950

#0C0C0C

tertiary

tertiary50

#ecfdf5

tertiary100

#d1fae5

tertiary200

#a7f3d0

tertiary300

#6ee7b7

tertiary400

#34d399

tertiary500

#10b981

tertiary600

#059669

tertiary700

#047857

tertiary800

#065f46

tertiary900

#064e3b

rose

rose50

#fff1f2

rose100

#ffe4e6

rose200

#fecdd3

rose300

#fda4af

rose400

#fb7185

rose500

#f43f5e

rose600

#e11d48

rose700

#be123c

rose800

#9f1239

rose900

#881337

pink

pink50

#fdf2f8

pink100

#fce7f3

pink200

#fbcfe8

pink300

#f9a8d4

pink400

#f472b6

pink500

#ec4899

pink600

#db2777

pink700

#be185d

pink800

#9d174d

pink900

#831843

fuchsia

fuchsia50

#fdf4ff

fuchsia100

#fae8ff

fuchsia200

#f5d0fe

fuchsia300

#f0abfc

fuchsia400

#e879f9

fuchsia500

#d946ef

fuchsia600

#c026d3

fuchsia700

#a21caf

fuchsia800

#86198f

fuchsia900

#701a75

purple

purple50

#faf5ff

purple100

#f3e8ff

purple200

#e9d5ff

purple300

#d8b4fe

purple400

#c084fc

purple500

#a855f7

purple600

#9333ea

purple700

#7e22ce

purple800

#6b21a8

purple900

#581c87

violet

violet50

#f5f3ff

violet100

#ede9fe

violet200

#ddd6fe

violet300

#c4b5fd

violet400

#a78bfa

violet500

#8b5cf6

violet600

#7c3aed

violet700

#6d28d9

violet800

#5b21b6

violet900

#4c1d95

indigo

indigo50

#eef2ff

indigo100

#e0e7ff

indigo200

#c7d2fe

indigo300

#a5b4fc

indigo400

#818cf8

indigo500

#6366f1

indigo600

#4f46e5

indigo700

#4338ca

indigo800

#3730a3

indigo900

#312e81

blue

blue50

#eff6ff

blue100

#dbeafe

blue200

#bfdbfe

blue300

#93c5fd

blue400

#60a5fa

blue500

#3b82f6

blue600

#2563eb

blue700

#1d4ed8

blue800

#1e40af

blue900

#1e3a8a

lightBlue

lightBlue50

#f0f9ff

lightBlue100

#e0f2fe

lightBlue200

#bae6fd

lightBlue300

#7dd3fc

lightBlue400

#38bdf8

lightBlue500

#0ea5e9

lightBlue600

#0284c7

lightBlue700

#0369a1

lightBlue800

#075985

lightBlue900

#0c4a6e

darkBlue

darkBlue50

#dbf4ff

darkBlue100

#addbff

darkBlue200

#7cc2ff

darkBlue300

#4aa9ff

darkBlue400

#1a91ff

darkBlue500

#0077e6

darkBlue600

#005db4

darkBlue700

#004282

darkBlue800

#002851

darkBlue900

#000e21

cyan

cyan50

#ecfeff

cyan100

#cffafe

cyan200

#a5f3fc

cyan300

#67e8f9

cyan400

#22d3ee

cyan500

#06b6d4

cyan600

#0891b2

cyan700

#0e7490

cyan800

#155e75

cyan900

#164e63

teal

teal50

#f0fdfa

teal100

#ccfbf1

teal200

#99f6e4

teal300

#5eead4

teal400

#2dd4bf

teal500

#14b8a6

teal600

#0d9488

teal700

#0f766e

teal800

#115e59

teal900

#134e4a

emerald

emerald50

#ecfdf5

emerald100

#d1fae5

emerald200

#a7f3d0

emerald300

#6ee7b7

emerald400

#34d399

emerald500

#10b981

emerald600

#059669

emerald700

#047857

emerald800

#065f46

emerald900

#064e3b

green

green50

#f0fdf4

green100

#dcfce7

green200

#bbf7d0

green300

#86efac

green400

#4ade80

green500

#22c55e

green600

#16a34a

green700

#15803d

green800

#166534

green900

#14532d

lime

lime50

#f7fee7

lime100

#ecfccb

lime200

#d9f99d

lime300

#bef264

lime400

#a3e635

lime500

#84cc16

lime600

#65a30d

lime700

#4d7c0f

lime800

#3f6212

lime900

#365314

yellow

yellow50

#fefce8

yellow100

#fef9c3

yellow200

#fef08a

yellow300

#fde047

yellow400

#facc15

yellow500

#eab308

yellow600

#ca8a04

yellow700

#a16207

yellow800

#854d0e

yellow900

#713f12

amber

amber50

#fffbeb

amber100

#fef3c7

amber200

#fde68a

amber300

#fcd34d

amber400

#fbbf24

amber500

#f59e0b

amber600

#d97706

amber700

#b45309

amber800

#92400e

amber900

#78350f

orange

orange50

#fff7ed

orange100

#ffedd5

orange200

#fed7aa

orange300

#fdba74

orange400

#fb923c

orange500

#f97316

orange600

#ea580c

orange700

#c2410c

orange800

#9a3412

orange900

#7c2d12

red

red50

#fef2f2

red100

#fee2e2

red200

#fecaca

red300

#fca5a5

red400

#f87171

red500

#ef4444

red600

#dc2626

red700

#b91c1c

red800

#991b1b

red900

#7f1d1d

warmGray

warmGray50

#fafaf9

warmGray100

#f5f5f4

warmGray200

#e7e5e4

warmGray300

#d6d3d1

warmGray400

#a8a29e

warmGray500

#78716c

warmGray600

#57534e

warmGray700

#44403c

warmGray800

#292524

warmGray900

#1c1917

trueGray

trueGray50

#fafafa

trueGray100

#f5f5f5

trueGray200

#e5e5e5

trueGray300

#d4d4d4

trueGray400

#a3a3a3

trueGray500

#737373

trueGray600

#525252

trueGray700

#404040

trueGray800

#262626

trueGray900

#171717

coolGray

coolGray50

#f9fafb

coolGray100

#f3f4f6

coolGray200

#e5e7eb

coolGray300

#d1d5db

coolGray400

#9ca3af

coolGray500

#6b7280

coolGray600

#4b5563

coolGray700

#374151

coolGray800

#1f2937

coolGray900

#111827

blueGray

blueGray50

#f8fafc

blueGray100

#f1f5f9

blueGray200

#e2e8f0

blueGray300

#cbd5e1

blueGray400

#94a3b8

blueGray500

#64748b

blueGray600

#475569

blueGray700

#334155

blueGray800

#1e293b

blueGray900

#0f172a

error

error50

#FEE2E2

error100

#FECACA

error200

#FCA5A5

error300

#F87171

error400

#EF4444

error500

#E63535

error600

#DC2626

error700

#B91C1C

error800

#7F1D1D

error900

#991B1B

error950

#220808

error00

#FEE9E9

success

success0

#E4FFF4

success50

#CAFFE8

success100

#A2F1C0

success200

#84D3A2

success300

#66B584

success400

#489766

success500

#348352

success600

#2A7948

success700

#206F3E

success800

#166534

success900

#14532D

success950

#071F11

warning

warning50

#fff7ed

warning100

#ffedd5

warning200

#fed7aa

warning300

#fdba74

warning400

#fb923c

warning500

#f97316

warning600

#ea580c

warning700

#c2410c

warning800

#9a3412

warning900

#7c2d12

info

info50

#f0f9ff

info100

#e0f2fe

info200

#bae6fd

info300

#7dd3fc

info400

#38bdf8

info500

#0ea5e9

info600

#0284c7

info700

#0369a1

info800

#075985

info900

#0c4a6e

light

light50

#fafaf9

light100

#f5f5f4

light200

#e7e5e4

light300

#d6d3d1

light400

#a8a29e

light500

#78716c

light600

#57534e

light700

#44403c

light800

#292524

light900

#1c1917

textLight

textLight0

#FCFCFC

textLight50

#F5F5F5

textLight100

#E5E5E5

textLight200

#DBDBDB

textLight300

#D4D4D4

textLight400

#A3A3A3

textLight500

#8C8C8C

textLight600

#737373

textLight700

#525252

textLight800

#404040

textLight900

#262626

textLight950

#171717

textDark

textDark0

#FCFCFC

textDark50

#F5F5F5

textDark100

#E5E5E5

textDark200

#DBDBDB

textDark300

#D4D4D4

textDark400

#A3A3A3

textDark500

#8C8C8C

textDark600

#737373

textDark700

#525252

textDark800

#404040

textDark900

#262626

textDark950

#171717

borderDark

borderDark0

#FCFCFC

borderDark50

#F5F5F5

borderDark100

#E5E5E5

borderDark200

#DBDBDB

borderDark300

#D4D4D4

borderDark400

#A3A3A3

borderDark500

#8C8C8C

borderDark600

#737373

borderDark700

#525252

borderDark800

#404040

borderDark900

#262626

borderDark950

#171717

borderLight

borderLight0

#FCFCFC

borderLight50

#F5F5F5

borderLight100

#E5E5E5

borderLight200

#DBDBDB

borderLight300

#D4D4D4

borderLight400

#A3A3A3

borderLight500

#8C8C8C

borderLight600

#737373

borderLight700

#525252

borderLight800

#404040

borderLight900

#262626

borderLight950

#171717

backgroundDark

backgroundDark0

#FCFCFC

backgroundDark50

#F5F5F5

backgroundDark100

#F1F1F1

backgroundDark200

#DBDBDB

backgroundDark300

#D4D4D4

backgroundDark400

#A3A3A3

backgroundDark500

#8C8C8C

backgroundDark600

#737373

backgroundDark700

#525252

backgroundDark800

#404040

backgroundDark900

#262626

backgroundDark950

#171717

backgroundLight

backgroundLight0

#FCFCFC

backgroundLight50

#F5F5F5

backgroundLight100

#F1F1F1

backgroundLight200

#DBDBDB

backgroundLight300

#D4D4D4

backgroundLight400

#A3A3A3

backgroundLight500

#8C8C8C

backgroundLight600

#737373

backgroundLight700

#525252

backgroundLight800

#404040

backgroundLight900

#262626

backgroundLight950

#171717

others

backgroundLightError

#FEF1F1

backgroundDarkError

#422B2B

backgroundLightWarning

#FFF4EB

backgroundDarkWarning

#412F23

backgroundLightSuccess

#EDFCF2

backgroundDarkSuccess

#1C2B21

backgroundLightInfo

#EBF8FE

backgroundDarkInfo

#1A282E

backgroundLightMuted

#F6F6F7

backgroundDarkMuted

#252526

white

#FFFFFF

black

#000000

Typography

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

fonts (font families)
fontSizes
fontWeights
lineHeights
letterSpacings

import { createConfig } from '@gluestack-ui/themed';
import {config as defaultConfig } from '@gluestack-ui/config';

const config = createConfig({
  ...defaultConfig,
  tokens: {
    ...defaultConfig.tokens,
    fontSizes: {
      ...defaultConfig.tokens.fontSizes,
      newFontSize: 90,
    },
    ...// other tokens
  },
});

Space

The space 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. You can refer to this to see the aliases for the spacing props.

Tokens

Value (Pixels)

Representation

1px

0.5

1.5

2.5

3.5

4.5

128

160

192

224

256

288

320

384

1/2

50%

1/3

33.333%

2/3

66.666%

1/4

25%

2/4

50%

3/4

75%

1/5

20%

2/5

40%

3/5

60%

4/5

80%

1/6

16.666%

2/6

33.333%

3/6

50%

4/6

66.666%

5/6

83.333%

full

100%

Opacity

You can define your opacity tokens or override existing ones using the createConfig function under the tokens section.

(0)

(0.05)

(0.1)

(0.2)

(0.25)

(0.3)

(0.4)

(0.5)

(0.6)

(0.7)

(0.75)

(0.8)

(0.9)

(0.95)

100

(1)

Shadows

In @gluestack-ui/themed there are two types of shadows provided by default.

Note: In the context of dark mode design, it's important to recognize that elevation serves as the primary tool for expressing hierarchy. Unlike in light mode, where shadows are used for this purpose, dark themes prioritize surface illumination. The higher the elevation, the lighter the surfaces become, ultimately improving visibility and clarity.

Hard Shadows

Soft Shadows

Borders

border widths

borderWidths tokens are used to define the border radius of an element. You can define your radii tokens or override existing ones using the createConfig function under the tokens section.

(0)

(1)

(2)

(4)

(8)

border radius

radii tokens are used to define the border radius of an element. You can define your radii tokens or override existing ones using the createConfig function under the tokens section.

none

(0)

(2)

(4)

(6)

(8)

(12)

2xl

(16)

3xl

(24)

full

(9999)