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, and backgroundColor, fill, stroke, styles.

We recommend adding palette that go from 50 - 900. Use tools like Coolors or Palx to generate these palette.

Chakra provide a sensible default theme inspired by Tailwind CSS, but you can customize it to fit your design.

Black & White#

Black
#000
White
#fff

Gray#

gray 50
#F7FAFC
gray 100
#EDF2F7
gray 200
#E2E8F0
gray 300
#CBD5E0
gray 400
#A0AEC0
gray 500
#718096
gray 600
#4A5568
gray 700
#2D3748
gray 800
#1A202C
gray 900
#171923

Red#

red 50
#fff5f5
red 100
#fed7d7
red 200
#feb2b2
red 300
#fc8181
red 400
#f56565
red 500
#e53e3e
red 600
#c53030
red 700
#9b2c2c
red 800
#822727
red 900
#63171b

Orange#

orange 50
#FFFAF0
orange 100
#FEEBC8
orange 200
#FBD38D
orange 300
#F6AD55
orange 400
#ED8936
orange 500
#DD6B20
orange 600
#C05621
orange 700
#9C4221
orange 800
#7B341E
orange 900
#652B19

Yellow#

yellow 50
#fffff0
yellow 100
#fefcbf
yellow 200
#faf089
yellow 300
#f6e05e
yellow 400
#ecc94b
yellow 500
#d69e2e
yellow 600
#b7791f
yellow 700
#975a16
yellow 800
#744210
yellow 900
#5F370E

Green#

green 50
#f0fff4
green 100
#c6f6d5
green 200
#9ae6b4
green 300
#68d391
green 400
#48bb78
green 500
#38a169
green 600
#2f855a
green 700
#276749
green 800
#22543d
green 900
#1C4532

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
#ebf8ff
blue 100
#ceedff
blue 200
#90cdf4
blue 300
#63b3ed
blue 400
#4299e1
blue 500
#3182ce
blue 600
#2a69ac
blue 700
#1e4e8c
blue 800
#153e75
blue 900
#1a365d

Cyan#

cyan 50
#EDFDFD
cyan 100
#C4F1F9
cyan 200
#9DECF9
cyan 300
#76E4F7
cyan 400
#0BC5EA
cyan 500
#00B5D8
cyan 600
#00A3C4
cyan 700
#0987A0
cyan 800
#086F83
cyan 900
#065666

Purple#

purple 50
#faf5ff
purple 100
#e9d8fd
purple 200
#d6bcfa
purple 300
#b794f4
purple 400
#9f7aea
purple 500
#805ad5
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

Breakpoints#

To configure the default breakpoints used in responsive array values, add a breakpoints array to your theme. These values will be used to generate mobile-first (i.e. min-width) media queries, which can then be used to apply responsive styles.

For example, you can write <Box fontSize={["14px", "16px"]}/> to make the fontSize responsive.

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.

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.

NameSpace (in rem)Pixels
000px
px1px1px
10.25rem4px
20.5rem8px
30.75rem12px
41rem16px
51.25rem20px
61.5rem24px
82rem32px
102.5rem40px
123rem48px
164rem64px
205rem80px
246rem96px
328rem128px
4010rem160px
4812rem192px
5614rem224px
6416rem256px

Note: This is rem units are relative to the root or html font size which is 16px by default. Chakra leaves this value unaltered.

Changing the root font size will make the pixel values above altered and you'll need to calculate the corresponding pixel value yourself.

The simple calcuation is remValue * rootFontSize = pixelValue

Sizes#

The sizes key allows you to customize the global sizeing of components you build for your project. By default these spacing value can be referenced by the width, height, and maxWidth, minWidth, maxHeight, minHeight styles.

For 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

Z-Index#

Chakra provides some zIndex values out of the box to control the stacking order of components.

Icons#

All Chakra icons are stored in the theme object under the icons key. See the icons.

You can extend this object to add your own icons. Here are the steps:

  • Export the icon's svg from Figma, Sketch, etc.
  • Use a tool like SvgOmg to reduce the size and minify the markup.
  • Add the icon to the theme object.

Add the fill=currentColor attribute to the path or g so that when you this <Icon color="gray.200"/>, it works correctly.

Configuration reference#

Except for breakpoints, colors, and spacing, all of the keys in the theme object map to one of Chakra's core theme. All of these keys can be replaced or extended.

See the full reference table of properties.

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2020 Segun Adebayo