Site 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 Chakra UI Styled System Theme Specification

Colors

Primary

primary 100
#F5F9FD
primary 200
#DBEAFF
primary 300
#88B1FC
primary 400
#5188EF
primary 500
#2066E9
primary 600
#1955C7
primary 700
#1648A6
primary 800
#08317D
primary 900
#04225A

Secondary

secondary 600
#6347E2

Helpers

Error
#F44336
Warning
#FF9800
Success
#4CAF50
Link
#0F62FE
Visited
#8A3FFC
1<Box bg="error">Hello</Box>

Grey Scale

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

Typography

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

  • fonts (font families)
  • fontSizes
  • fontWeights
  • lineHeights
  • letterSpacings

Heading

Usage

1<Box as="h1" textStyle="H500">
2 I am an H500
3</Box>

(H500) In love with Media Jams

(H400) In love with Media Jams
(H300) In love with MediaJams
(H200) In love with MediaJams
(H100) In love with MediaJams

Base Mapping Semantic HTML

Heading

1<Heading as="h1" size="H500">I'm an H500 with 'Heading h1'</Heading>
2<Heading as="h2" size="H400">I'm an H400 with 'Heading h2'</Heading>
3<Heading as="h3" size="H300">I'm an H300 with 'Heading h3'</Heading>
4<Heading size="H300">
5 I'm an H300 with no as prop that became an h2 by default
6</Heading>
7<h2>I'm a vanillia 'h2' element</h2>

I'm an H500 with 'Heading h1'

I'm an H400 with 'Heading h2'

I'm an H300 with 'Heading h3'

I'm an H300 with no as prop that became an h2 by default

I'm a vanillia 'h2' element

Text

1<Text variant="B500">
2 I am Body 500 Ultimate design system as the common design language
3</Text>
4<Text variant="B400">
5 I am Body 400 Ultimate design system as the common design language
6</Text>
7<p>I am a regular 'p' tag defaults to Body 400</p>

I am Body 500 Ultimate design system as the common design language

I am Body 400 Ultimate design system as the common design language

I am Body 300 Ultimate design system as the common design language

I am Body 200 Ultimate design system as the common design language

I am Body 100 Ultimate design system as the common design language

I am a regular 'p' tag defaults to Body 400