색 커스터마이징

색 커스터마이징 (Customizing Colors)

Chakra UI에서 색을 커스터마이징하는 방법에 대해 알아봐요. 커스텀 색 토큰과 시맨틱 토큰을 만들어 일관된 색 팔레트를 구성할 수 있어요.

출처: 문서

본문

:::info

스타일링 엔진을 제대로 커스터마이징하고 타입 안정성을 얻으려면 먼저 개요를 읽어보세요.

:::

토큰 (Tokens)

새 색을 만들 때는 50 - 950 색상 값을 제공하는 것을 권장해요. Chakra UI에서 색을 커스터마이징하는 예시예요.

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

const customConfig = defineConfig({
  theme: {
    tokens: {
      colors: {
        brand: {
          50: { value: "#e6f2ff" },
          100: { value: "#e6f2ff" },
          200: { value: "#bfdeff" },
          300: { value: "#99caff" },
          // ...
          950: { value: "#001a33" },
        },
      },
    },
  },
})

export const system = createSystem(defaultConfig, customConfig)

brand 색을 사용하려면 bg, borderColor, color 등 색 관련 프로퍼티 값을 brand 토큰으로 설정하면 돼요.

<Box bg="brand.100" />

시맨틱 토큰 (Semantic Tokens)

색 팔레트 (Color Palette)

테마에 새 색을 정의했다면 일관성을 위해 다음과 같은 시맨틱 토큰을 함께 만드는 것을 권장해요.

solid: 색의 진한 채움 색
contrast: solid 색 위에 쓰는 텍스트 색
fg: 텍스트, 아이콘 등에 쓰는 전경 색
muted: 색의 뮤트(muted) 색
subtle: 색의 서브틀(subtle) 색
emphasized: 서브틀 색의 강조(emphasized) 버전
focusRing: 대화형 요소가 포커스될 때의 포커스 링 색

:::note

colorPalette 프로퍼티에서 색을 사용하려면 이 작업이 필요해요.

:::

const customConfig = defineConfig({
  theme: {
    tokens: {
      colors: {
        brand: {
          // ...
        },
      },
    },
    semanticTokens: {
      colors: {
        brand: {
          solid: { value: "{colors.brand.500}" },
          contrast: { value: "{colors.brand.100}" },
          fg: { value: "{colors.brand.700}" },
          muted: { value: "{colors.brand.100}" },
          subtle: { value: "{colors.brand.200}" },
          emphasized: { value: "{colors.brand.300}" },
          focusRing: { value: "{colors.brand.500}" },
        },
      },
    },
  },
})

컴포넌트에서 색 팔레트를 사용하려면 colorPalette 프로퍼티를 써요.

<Button colorPalette="brand">Click me</Button>

또는 시맨틱 토큰을 직접 사용할 수도 있어요.

<Box color="brand.contrast" bg="brand.solid">
  Hello world
</Box>

커스텀 토큰 (Custom Tokens)

커스텀 시맨틱 토큰을 만드는 예시예요.

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

const customConfig = defineConfig({
  theme: {
    semanticTokens: {
      colors: {
        "checkbox-border": {
          value: { _light: "gray.200", _dark: "gray.800" },
        },
      },
    },
  },
})

export const system = createSystem(defaultConfig, customConfig)

그러면 checkbox-border 토큰을 어떤 컴포넌트에든 적용할 수 있어요.

<Square size="4" borderColor="checkbox-border">
  <LuCheck />
</Square>

색 커스터마이징