gluestack-ui v5 ships with shadcn-inspired default tokens, including colored tokens that provide access to theme values and flexibility to build and customize your own themed UI components.
Theming in gluestack-ui is based on the

Styled System Theme Specification

and follows the

shadcn/ui

design principles.

Colors

gluestack-ui v5 uses a semantic color token system inspired by shadcn/ui. Instead of using numerical color scales (50-900), we use purpose-driven color names that adapt automatically to light and dark modes.

Semantic Color Tokens

The color system is organized around semantic tokens that describe their purpose rather than their appearance:

Base Colors

background
- Default page background

foreground
- Default text color

Component Colors

card
- Card backgrounds

popover
- Popover/dropdown backgrounds

popover-foreground
- Text color for popovers

Semantic Colors with Foregrounds

Each semantic color has a corresponding

-foreground

token for optimal contrast:

primary
/ primary-foreground
- Primary actions and highlights

secondary
/ secondary-foreground
- Secondary actions

accent
/ accent-foreground
- Accent elements

muted
/ muted-foreground
- Muted/subtle content

destructive
- Destructive actions (errors, delete buttons)

Form & Border Colors

border
- Default border color

input
- Input field borders

ring
- Focus ring color

Color Palette

Below are the default color tokens provided in gluestack-ui v5. These automatically adapt between light and dark modes:

foreground

DEFAULT#0a0a0a

card

default#ffffff

foregroundrgb(var(--card-foreground) / <alpha-value>)

popover

default#ffffff

foreground#0a0a0a

muted

default#f5f5f5

foreground#737373

destructive

default#e7000b

border

DEFAULT#e5e5e5

input

DEFAULT#e5e5e5

ring

DEFAULT#d4d4d4

primary

default#171717

foreground#fafafa

secondary

default#f5f5f5

foreground#171717

background

default#ffffff

accent

default#f7f7f7

foreground#343434

How It Works

The color tokens use RGB values without the
rgb()
wrapper, allowing for opacity modifications using Tailwind's opacity syntax:

// In config.ts
export const config = {
  light: vars({
    '--primary': '23 23 23',           // Almost black in light mode
    '--primary-foreground': '250 250 250', // Almost white text
  }),
  dark: vars({
    '--primary': '255 245 245',        // Almost white in dark mode
    '--primary-foreground': '23 23 23',    // Almost black text
  }),
};

Usage with opacity:

<>
  {/* Full opacity — bg-primary (100% opacity) */}
  <Box className="bg-primary" />

  {/* 50% opacity — bg-primary/50 */}
  <Box className="bg-primary/50" />
</>

Benefits of This System

Step 1:Semantic naming - Colors describe their purpose, not their shade
Step 2:Automatic dark mode - Tokens adapt to light/dark mode automatically
Step 3:Guaranteed contrast - Foreground tokens ensure readable text
Step 4:Design system consistency - Follows industry-standard patterns

To customize colors, update

gluestack-ui-provider/config.ts

and

global.css

. For detailed instructions, see

Customizing Theme

Typography

To manage Typography options, add tokens in

global.css

via

@theme inline

. To add or update Font Family, use

@theme inline

global.css

@theme inline {
  --font-family-roboto: 'Roboto', sans-serif;
}

Please refer to the

Tailwind CSS documentation

for more details. To add or update font sizes, use

@theme inline

global.css

@theme inline {
  --font-size-2xs: 10px;
}

Please refer to the

Tailwind CSS documentation

for more details. Text of fontSize (2xs)
To add or update font weights, use

@theme inline

global.css

@theme inline {
  --font-weight-extrablack: 950;
}

Please refer to the

Tailwind CSS documentation

for more details. Text of fontWeight (extrablack)
To add or update line heights. Please refer

Tailwind CSS documentation

. To add or update letter spacing. Please refer

Tailwind CSS documentation

Breakpoints

gluestack-ui comes with default Tailwind CSS breakpoints. Please refer

this

link for customization.

Spacing

gluestack-ui comes with default Tailwind CSS spacing. Please refer

this

link for customization.

Radius

gluestack-ui comes with default Tailwind CSS border-radius. Please refer

this

link for customization.

Shadows

gluestack-ui comes with default Tailwind CSS Shadows and we provide two more types of shadows.

Hard Shadows

Soft Shadows

Please refer

this

link for customization.

Edit this page on GitHub

Go backBenchmarks

Up nextCustomizing Theme

Go backBenchmarks

Up nextCustomizing Theme