Default Tokens

gluestack-ui v3 ships with 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 v3
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. Below are the default color palette tokens provided in the gluestack-ui default config.
foreground
0r
1g
2b
3(
4v
5a
6r
7(
8-
9-
10f
11o
12r
13e
14g
15r
16o
17u
18n
19d
20)
21/
22<
23a
24l
25p
26h
27a
28-
29v
30a
31l
32u
33e
34>
35)
card
DEFAULT#171717
foregroundrgb(var(--card-foreground) / <alpha-value>)
popover
DEFAULT#171717
foreground#fafafa
muted
DEFAULT#262626
foreground#a1a1a1
destructive
DEFAULT#ff6467
border
0r
1g
2b
3(
4v
5a
6r
7(
8-
9-
10b
11o
12r
13d
14e
15r
16)
17/
18<
19a
20l
21p
22h
23a
24-
25v
26a
27l
28u
29e
30>
31)
input
0r
1g
2b
3(
4v
5a
6r
7(
8-
9-
10i
11n
12p
13u
14t
15)
16/
17<
18a
19l
20p
21h
22a
23-
24v
25a
26l
27u
28e
29>
30)
ring
0r
1g
2b
3(
4v
5a
6r
7(
8-
9-
10r
11i
12n
13g
14)
15
16/
17
18<
19a
20l
21p
22h
23a
24-
25v
26a
27l
28u
29e
30>
31)
white
0r
1g
2b
3(
42
55
65
7
82
95
105
11
122
135
145
15)
chart
1rgb(var(--chart-1) / <alpha-value>)
2rgb(var(--chart-2) / <alpha-value>)
3rgb(var(--chart-3) / <alpha-value>)
4rgb(var(--chart-4) / <alpha-value>)
5rgb(var(--chart-5) / <alpha-value>)
sidebar
DEFAULTrgb(var(--sidebar) / <alpha-value>)
foregroundrgb(var(--sidebar-foreground) / <alpha-value>)
primaryrgb(var(--sidebar-primary) / <alpha-value>)
primary-foregroundrgb(var(--sidebar-primary-foreground) / <alpha-value>)
accentrgb(var(--sidebar-accent) / <alpha-value>)
accent-foregroundrgb(var(--sidebar-accent-foreground) / <alpha-value>)
borderrgb(var(--sidebar-border))
ringrgb(var(--sidebar-ring) / <alpha-value>)
primary
DEFAULT#fff5f5
foreground#171717
secondary
DEFAULT#262626
foreground#fafafa
typography
white#FFFFFF
gray#D4D4D4
black#181718
background
DEFAULT#0a0a0a
accent
DEFAULT#262626
foreground#fafafa
To add custom color or update token. Please refer
tailwind CSS documentation
.

Typography

To manage Typography options, update theme in
tailwind.config.js
. To add or update Font Family. Please refer
Tailwind CSS documentation
. We have also added a new family, 'roboto', in our
tailwind.config.js
. To add or update font sizes, please refer to the
Tailwind CSS documentation
. We have added a new size, '2xs', in
tailwind.config.js
with a value of '10px'. Text of fontSize (2xs)
To add or update font weights, please refer to the
Tailwind CSS documentation
. We have added a new weight, 'extrablack', in
tailwind.config.js
with a value of '950'. 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

1
2
3
4
5

Soft Shadows

1
2
3
4

Please refer
this
 link for customization.
Edit this page on GitHub
Go backBenchmarks
Up nextCustomizing Theme