테마 커스터마이징 개요

테마 커스터마이징 개요 (Customization)

Chakra UI 테마를 커스터마이징하는 방법에 대해 알아봐요. defineConfig와 createSystem을 사용해 자체 스타일링 시스템을 구성하는 전체 흐름을 살펴볼게요.

출처: 문서

본문

개요 (Overview)

Chakra UI는 config 시스템을 사용해 기본 스타일링 시스템을 정의해요.

defaultBaseConfig: 조건(conditions)과 스타일 프로퍼티를 포함해요 (토큰과 레시피는 제외).
defaultConfig: defaultBaseConfig의 모든 것에 더해 내장 토큰과 레시피를 포함해요.

Chakra UI에서 내보내는 defaultSystem은 기본적으로 defaultConfig를 사용해요.

테마를 커스터마이징할 때는 자신의 config를 defaultConfig와 병합할지, defaultBaseConfig로 처음부터 시작할지를 정하는 것이 중요해요.

커스터마이징 (Customization)

Chakra UI 테마를 커스터마이징하는 데 필요한 핵심 함수들은 다음과 같아요.

defineConfig: 시스템 config를 정의할 때 사용
createSystem: config로 스타일링 엔진을 만들 때 사용

import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"

const config = defineConfig({
  theme: {
    tokens: {
      colors: {
        brand: {
          "500": { value: "tomato" },
        },
      },
    },
  },
})

export const system = createSystem(defaultConfig, config)

그다음 ChakraProvider가 커스텀 시스템을 사용하도록 업데이트해요.

import { ChakraProvider } from "@chakra-ui/react"
import { ThemeProvider } from "next-themes"
import { system } from "./theme"

export function Provider(props: { children: React.ReactNode }) {
  return (
    <ChakraProvider value={system}>
      <ThemeProvider attribute="class">{props.children}</ThemeProvider>
    </ChakraProvider>
  )
}

완전한 커스터마이징 (Complete Customization)

대부분의 경우 기본 설정에서 시작해서 커스터마이징하고 싶은 것만 지정하는 것을 권장해요.

하지만 처음부터 시작하고 싶다면 CLI를 사용해 기본 토큰과 레시피를 스캐폴딩할 수 있어요.

npx @chakra-ui/cli eject --outdir ./theme

이 명령은 Chakra의 모든 토큰과 레시피가 담긴 파일을 생성해요.

TypeScript

기본 config를 커스터마이징한 뒤에는 타입을 업데이트해야 할 수 있어요. typegen 명령을 실행해 타입을 생성해요. postinstall, CI, 모노레포에서 typegen을 실행하는 방법은 CLI 문서를 참고해요.

npx @chakra-ui/cli typegen ./theme.ts

테마 커스터마이징 개요