Kamwoo blog

theme object에 아래 사항을 정의한다

color palette
type scale
font stacks
break points
border radius
등등

Colors

theme.colors 는 color, borderColor, backgroundColor, fill, stroke 등이 참조한다.

1import { extendTheme } from '@chakra-ui/react'
2
3const	colors = {
4		purple: {
5			50: '#f7fafc',
6      // ...
7      900: '#171923',
8		}
9	}
10
11const theme = extendTheme({ colors })

Typography

fonts, fontSizes, fontWeights, lineHeights, letterSpacings 등의 옵션이 존재

1import { extendsTheme } from "@chakra-ui/react"
2
3const	fonts = {
4		body: 'sens-serif',
5		heading: 'Georgia, serif',
6	}
7
8const	fontSizes = {
9		xs: '0.75rem'
10	}
11
12const	fontWeights = {
13		light: 300
14	}
15
16const	lineHeights = {
17		short: "1.375rem"
18	}
19
20const	letterSpacings = {
21		wide: "0.025"
22	}
23
24const theme = extendTheme({ fonts, fontSizes, fontWeights, lineHeights, letterSpacings })

Space

padding, margin, top, left, right, bottom의 참조로 사용된다.

1import { extendTheme } from '@chakra-ui/react'
2
3const space = {
4	px: '1px',
5	0.5: '0.125rem'
6	...
7}
8
9const theme = extendTheme({ space })

Sizes

Width, height, maxWidth, minWidth, maxHeight, minHeight의 참조로 사용된다.

1import { extendTheme } from '@chakra-ui/react'
2
3const sizes = {
4	full: '100%',
5	xs: '20rem',
6	...
7}
8
9const theme = extendTheme({ sizes })

Breakpoints

반응형 기준

1import { extendTheme } from '@chakra-ui/react'
2
3const breakpoints = {
4	sm: '30rem',
5	...
6}
7
8const theme = extendTheme({ breakpoints })

그 밖에

Border radius = radii
z-index = zIndices

Config

global settings를 설정할 수 있다.