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 with Chakra UI is based on the Styled System Theme Specification
Colors
Add a theme.colors object to provide colors for your project. By default these
colors can be referenced by the color, borderColor, backgroundColor,
fill, stroke, styles.
We recommend adding a palette that ranges from 50 to 900. Tools like
Themera,
Smart Swatch,
Coolors or Palx are
available to generate these palettes.
export default {
colors: {
transparent: "transparent",
black: "#000",
white: "#fff",
gray: {
50: "#f7fafc",
// ...
900: "#171923",
},
// ...
},
};
Chakra provides a sensible default theme inspired by Tailwind CSS, but you can customize it to fit your design.
Black & White
Alphas
Toggle the docsite's color mode to see the change in the whiteAlpha colors.
Gray
Red
Orange
Yellow
Green
Teal
Blue
Cyan
Purple
Pink
Typography
To manage Typography options, the theme object supports the following keys:
fonts(font families)fontSizesfontWeightslineHeightsletterSpacings
import { extendTheme } from '@chakra-ui/react'
// example theme
const theme = extendTheme({
colors: {...},
fonts: {
body: "system-ui, sans-serif",
heading: "Georgia, serif",
mono: "Menlo, monospace",
},
fontSizes: {
xs: "0.75rem",
sm: "0.875rem",
md: "1rem",
lg: "1.125rem",
xl: "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem",
"5xl": "3rem",
"6xl": "3.75rem",
"7xl": "4.5rem",
"8xl": "6rem",
"9xl": "8rem",
},
fontWeights: {
hairline: 100,
thin: 200,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900,
},
lineHeights: {
normal: "normal",
none: 1,
shorter: 1.25,
short: 1.375,
base: 1.5,
tall: 1.625,
taller: "2",
"3": ".75rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"7": "1.75rem",
"8": "2rem",
"9": "2.25rem",
"10": "2.5rem",
},
letterSpacings: {
tighter: "-0.05em",
tight: "-0.025em",
normal: "0",
wide: "0.025em",
wider: "0.05em",
widest: "0.1em",
},
});
Breakpoints
Chakra UI comes with a predefined set of commonly used breakpoints.
Learn more about Responsive Styles and Customizing Breakpoints.
import { extendTheme } from '@chakra-ui/react'
const breakpoints = {
sm: '30em',
md: '48em',
lg: '62em',
xl: '80em',
'2xl': '96em',
}
const theme = extendTheme({ breakpoints, ... })
Spacing
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 styles.
import { extendTheme } from "@chakra-ui/react";
const spacing = {
space: {
px: "1px",
0.5: "0.125rem",
1: "0.25rem",
1.5: "0.375rem",
2: "0.5rem",
2.5: "0.625rem",
3: "0.75rem",
3.5: "0.875rem",
4: "1rem",
5: "1.25rem",
6: "1.5rem",
7: "1.75rem",
8: "2rem",
9: "2.25rem",
10: "2.5rem",
12: "3rem",
14: "3.5rem",
16: "4rem",
20: "5rem",
24: "6rem",
28: "7rem",
32: "8rem",
36: "9rem",
40: "10rem",
44: "11rem",
48: "12rem",
52: "13rem",
56: "14rem",
60: "15rem",
64: "16rem",
72: "18rem",
80: "20rem",
96: "24rem",
},
};
const theme = extendTheme({ ...spacing });
By default, Chakra includes a comprehensive numeric spacing scale inspired by
Tailwind CSS. The values are proportional, so 1 spacing unit is equal to
0.25rem, which translates to 4px by default in common browsers.
Mental model: If you need a spacing of 40px, divide it by 4. That'll
give you 10. Then use it in your component.
| Name | Space | Pixels | |
|---|---|---|---|
| px | 1px | 1px | |
| 0.5 | 0.125rem | 2px | |
| 1 | 0.25rem | 4px | |
| 1.5 | 0.375rem | 6px | |
| 2 | 0.5rem | 8px | |
| 2.5 | 0.625rem | 10px | |
| 3 | 0.75rem | 12px | |
| 3.5 | 0.875rem | 14px | |
| 4 | 1rem | 16px | |
| 5 | 1.25rem | 20px | |
| 6 | 1.5rem | 24px | |
| 7 | 1.75rem | 28px | |
| 8 | 2rem | 32px | |
| 9 | 2.25rem | 36px | |
| 10 | 2.5rem | 40px | |
| 12 | 3rem | 48px | |
| 14 | 3.5rem | 56px | |
| 16 | 4rem | 64px | |
| 20 | 5rem | 80px | |
| 24 | 6rem | 96px | |
| 28 | 7rem | 112px | |
| 32 | 8rem | 128px | |
| 36 | 9rem | 144px | |
| 40 | 10rem | 160px | |
| 44 | 11rem | 176px | |
| 48 | 12rem | 192px | |
| 56 | 14rem | 224px | |
| 60 | 15rem | 240px | |
| 64 | 16rem | 256px | |
| 72 | 18rem | 288px | |
| 80 | 20rem | 320px | |
| 96 | 24rem | 384px |
Sizes
The sizes key allows you to customize the global sizing of components you
build for your project. By default these sizes value can be referenced by the
width, height, and maxWidth, minWidth, maxHeight, minHeight styles.
import { extendTheme } from '@chakra-ui/react'
const sizes = {
sizes: {
...theme.space,
max: 'max-content',
min: 'min-content',
full: '100%',
'3xs': '14rem',
'2xs': '16rem',
xs: '20rem',
sm: '24rem',
md: '28rem',
lg: '32rem',
xl: '36rem',
'2xl': '42rem',
'3xl': '48rem',
'4xl': '56rem',
'5xl': '64rem',
'6xl': '72rem',
'7xl': '80rem',
'8xl': '90rem',
container: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
},
},
}
const theme = extendTheme({ sizes, ...})
A component like this: <Box w={4} h={3} /> will generate an empty div with
width set to 1rem or 16px and height set to 0.75rem or 12px.
Border radius
Chakra provides a set of smooth corner radius values defined by the radii key.
import { extendTheme } from '@chakra-ui/react'
const borderRadius = {
radii: {
none: '0',
sm: '0.125rem',
base: '0.25rem',
md: '0.375rem',
lg: '0.5rem',
xl: '0.75rem',
'2xl': '1rem',
'3xl': '1.5rem',
full: '9999px',
},
}
const theme = extendTheme({ ...borderRadius, ...})
z-index values
Chakra provides a minimal set of z-Indices out of the box to help control the stacking order of components.
import { extendTheme } from '@chakra-ui/react'
const zIndices = {
zIndices: {
hide: -1,
auto: 'auto',
base: 0,
docked: 10,
dropdown: 1000,
sticky: 1100,
banner: 1200,
overlay: 1300,
modal: 1400,
popover: 1500,
skipLink: 1600,
toast: 1700,
tooltip: 1800,
},
}
const theme = extendTheme({ zIndices, ...})
Config
The theme's config is to provide global settings that are used by different parts of the Chakra UI system.
| Property | Description | Default |
|---|---|---|
cssVarPrefix (v1.4) | The prefix to use for the generated CSS custom properties | chakra |
initialColorMode | The initial color mode your application should start with. Can be either light or dark mode | light |
useSystemColorMode | If true, the chakra system will update color mode based on your system preferences | false |
You can leverage the extendTheme function to override a specific theme config
property.
import { extendTheme } from "@chakra-ui/react";
const theme = extendTheme({
config: {
cssVarPrefix: "ck",
},
});