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

View Source

@chakra-ui/theme

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.

// theme.js
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#

Black

#2D333A

White

#FFFFFF

Alphas#

Note: Toggle the site's color mode to see the change in the whiteAlpha colors.

blackAlpha 50

rgba(0, 0, 0, 0.04)

blackAlpha 100

rgba(0, 0, 0, 0.06)

blackAlpha 200

rgba(0, 0, 0, 0.08)

blackAlpha 300

rgba(0, 0, 0, 0.16)

blackAlpha 400

rgba(0, 0, 0, 0.24)

blackAlpha 500

rgba(0, 0, 0, 0.36)

blackAlpha 600

rgba(0, 0, 0, 0.48)

blackAlpha 700

rgba(0, 0, 0, 0.64)

blackAlpha 800

rgba(0, 0, 0, 0.80)

blackAlpha 900

rgba(0, 0, 0, 0.92)

whiteAlpha 50

rgba(255, 255, 255, 0.04)

whiteAlpha 100

rgba(255, 255, 255, 0.06)

whiteAlpha 200

rgba(255, 255, 255, 0.08)

whiteAlpha 300

rgba(255, 255, 255, 0.16)

whiteAlpha 400

rgba(255, 255, 255, 0.24)

whiteAlpha 500

rgba(255, 255, 255, 0.36)

whiteAlpha 600

rgba(255, 255, 255, 0.48)

whiteAlpha 700

rgba(255, 255, 255, 0.64)

whiteAlpha 800

rgba(255, 255, 255, 0.80)

whiteAlpha 900

rgba(255, 255, 255, 0.92)

Gray#

gray 50

#F7F7F7

gray 100

#F2F2F2

gray 200

#E5E5E5

gray 300

#D4D4D4

gray 400

#CCCCCC

gray 500

#A7B2BB

gray 600

#B0B3B5

gray 700

#949494

gray 800

#8F8F8F

gray 900

#666666

Red#

red 50

#ffe1e1

red 100

#ffb1b1

red 200

#FF5A5F

red 300

#f44336

red 400

#EB5757

red 500

#DA0000

red 600

#b40000

red 700

#810000

red 800

#500000

red 900

#210000

Orange#

orange 50

#fff4db

orange 100

#ffe2ad

orange 200

#ffce7d

orange 300

#febb4b

orange 400

#F2994A

orange 500

#E28C01

orange 600

#A4783E

orange 700

#cb7e00

orange 800

#803e00

orange 900

#4d1f00

Yellow#

yellow 50

#FFFFF0

yellow 100

#FEFCBF

yellow 200

#FAF089

yellow 300

#F6E05E

yellow 400

#FFCD00

yellow 500

#D69E2E

yellow 600

#C5A85E

yellow 700

#975A16

yellow 800

#744210

yellow 900

#5F370E

Green#

green 50

#aeffcf

green 100

#7effb6

green 200

#3ED284

green 300

#22ff8e

green 400

#0ee67c

green 500

#00AB61

green 600

#00803f

green 700

#004e1f

green 800

#001c04

green 900

#001c04

Teal#

teal 50

#E6FFFA

teal 100

#B2F5EA

teal 200

#81E6D9

teal 300

#4FD1C5

teal 400

#38B2AC

teal 500

#319795

teal 600

#2C7A7B

teal 700

#285E61

teal 800

#234E52

teal 900

#1D4044

Blue#

blue 50

#AAEFFF

blue 100

#55DAFF

blue 200

#1BCCFD

blue 300

#0094C9

blue 400

#007EB0

blue 500

#00B2E3

blue 600

#1758A0

blue 700

#005885

blue 800

#003D61

blue 900

#001A29

Cyan#

cyan 50

#AAEFFF

cyan 100

#55DAFF

cyan 200

#1BCCFD

cyan 300

#0094C9

cyan 400

#007EB0

cyan 500

#00B2E3

cyan 600

#1758A0

cyan 700

#005885

cyan 800

#003D61

cyan 900

#001A29

Purple#

purple 50

#FAF5FF

purple 100

#E9D8FD

purple 200

#D6BCFA

purple 300

#B794F4

purple 400

#9F7AEA

purple 500

#9B51E0

purple 600

#6B46C1

purple 700

#553C9A

purple 800

#44337A

purple 900

#322659

Pink#

pink 50

#FFF5F7

pink 100

#FED7E2

pink 200

#FBB6CE

pink 300

#F687B3

pink 400

#ED64A6

pink 500

#D53F8C

pink 600

#B83280

pink 700

#97266D

pink 800

#702459

pink 900

#521B41

Typography#

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

fonts (font families)
fontSizes
fontWeights
lineHeights
letterSpacings

import { extendTheme } from '@fluidtruck/core'

// 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 '@fluidtruck/core'

const breakpoints = {
  base: '0em',
  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 "@fluidtruck/core";

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 '@fluidtruck/core'

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 '@fluidtruck/core'

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 '@fluidtruck/core'

const 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 `light`, `dark` or `system`	`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 "@fluidtruck/core";

const theme = extendTheme({
  config: {
    cssVarPrefix: "ck",
  },
});