가상 색(Virtual Color)

테마와 커스터마이징을 더 쉽게 만들어주는 색상 플레이스홀더, 가상 색에 대해 알아봐요. colorPalette 프로퍼티를 쓰면 색 팔레트를 동적으로 바꿀 수 있어요.

출처: 문서

본문

개요 (Overview)

Chakra는 프로젝트에 가상 색 또는 색상 플레이스홀더를 만들 수 있게 해줘요. colorPalette 프로퍼티가 바로 가상 색을 만드는 방법이에요.

<Box
  colorPalette="blue"
  bg={{ base: "colorPalette.100", _hover: "colorPalette.200" }}
>
  Hello World
</Box>

이 코드는 기본 상태에서 blue.100 배경색, 호버 상태에서 blue.200 배경색으로 변환돼요.

사용법 (Usage)

가상 색의 기본 요건은 색상 이름 규칙이 일관적이어야 한다는 거예요. 기본적으로 Chakra는 각 색에 50-950 색상 값을 사용해요.

이 덕분에 가상 색을 만들고 사용하기가 훨씬 쉬워져요. 테마에 맞게 바꿀 수 있는(outline) 버튼을 처음부터 만든다고 가정해볼게요.

<chakra.button
  borderWidth="1px"
  colorPalette="red"
  borderColor="colorPalette.500"
  _hover={{
    borderColor: "colorPalette.600",
  }}
>
  Click me
</chakra.button>

레시피 (Recipes)

가상 색은 레시피(recipes)와 함께 쓸 때 가장 유용해요.

const buttonRecipe = defineRecipe({
  base: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    // set the color palette
    colorPalette: "blue",
  },
  variants: {
    variant: {
      primary: {
        bg: "colorPalette.500",
        color: "white",
      },
      outline: {
        borderWidth: "1px",
        borderColor: "colorPalette.500",
        _hover: {
          borderColor: "colorPalette.600",
        },
      },
    },
  },
})

컴포넌트 (Components)

Chakra의 대부분의 내장 컴포넌트는 가상 색을 지원해요.

<Button colorPalette="blue">Click me</Button>
<Button colorPalette="red" variant="outline">
  Click me
</Button>

다크 모드 (Dark mode)

가상 색으로 할 수 있는 또 하나의 멋진 점은 다크 모드와 함께 쓸 수 있다는 거예요.

<Box
  colorPalette="blue"
  bg={{ base: "colorPalette.600", _dark: "colorPalette.400" }}
>
  Hello World
</Box>

이 요소는 라이트 모드에서 blue.600 배경색, 다크 모드에서 blue.400 배경색을 가져요.

가상 색(Virtual Color)