다크 모드

다크 모드 (Dark Mode)

Chakra UI 애플리케이션에서 다크 모드를 사용하는 방법을 알려드려요. 색상 모드를 손쉽게 구현하고 다크 모드 스타일까지 적용할 수 있어요.

출처: 문서

본문

Chakra는 다크 모드 지원을 위해 next-themes 라이브러리를 사용해요. 설치 과정 중에 시작하는 데 필요한 스니펫이 CLI를 통해 프로젝트에 추가돼요.

컴포넌트에 색상 모드를 구현하려면 다음을 사용할 수 있어요.

시맨틱 토큰 (권장): bg.subtle 같은 Chakra 내장 시맨틱 토큰을 사용하면 밝은/어두운 모드에 자동으로 적응해요.
_dark 오버라이드: 각 색상 속성에 대해 다크 모드 스타일을 수동으로 지정해요.

설정

아직 하지 않았다면 CLI를 통해 next-themes 라이브러리를 프로젝트에 추가하세요.

npx @chakra-ui/cli snippet add color-mode

생성된 스니펫은 다음으로 구성돼요.

ColorModeProvider: next-themes provider 컴포넌트를 감싸요.
useColorMode: 현재 색상 모드와 색상 모드를 토글하는 함수를 제공해요.
useColorModeValue: 현재 색상 모드에 기반한 올바른 값을 반환해요.
ColorModeButton: 색상 모드를 토글하는 데 사용할 수 있어요.

사용법

앱을 ColorModeProvider로 감싸고 useColorMode 훅을 사용해서 색상 모드에 접근하고 토글하세요.

import { ColorModeProvider } from "@/components/ui/color-mode"
import { ChakraProvider, defaultSystem } from "@chakra-ui/react"

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <ChakraProvider value={defaultSystem}>
      <ColorModeProvider>{children}</ColorModeProvider>
    </ChakraProvider>
  )
}

다크 모드 토글 추가

ColorModeButton 컴포넌트를 사용해서 색상 모드를 토글하세요.

import { ColorModeButton } from "@/components/ui/color-mode"

export default function Page({ children }: { children: React.ReactNode }) {
  return (
    <>
      <ColorModeButton />
      {children}
    </>
  )
}

다크 모드 스타일링

_dark 조건을 사용해서 다크 모드용 컴포넌트를 스타일링하세요.

<Box bg={{ base: "white", _dark: "black" }}>
  <Text>Hello</Text>
</Box>

또는

<Box bg="white" _dark={{ bg: "black" }}>
  <Text>Hello</Text>
</Box>

시맨틱 토큰 사용

작성해야 할 코드 양을 줄이려면 시맨틱 토큰을 사용해서 다크 모드용 컴포넌트를 스타일링하세요. 그러면 밝은/어두운 모드 스타일이 자동으로 일관되게 적용돼요.

Chakra는 다크 모드용 컴포넌트를 스타일링하는 데 쓸 수 있는 시맨틱 토큰 세트를 제공해요. 시맨틱 토큰에 대해 더 알아보세요.

<Box bg="bg.subtle">
  <Text>Hello</Text>
</Box>

다크 모드 강제 적용

요소별 다크 모드

다크 모드를 강제하려면 부모 요소나 애플리케이션의 루트 요소에 dark className을 설정하세요.

<Box bg="black" className="dark">
  <Box bg="bg.subtle">
    <Text>Hello</Text>
  </Box>
</Box>

라이트 모드도 동일하게 적용되며, light className을 사용해요.

<Box bg="white" className="light">
  <Box bg="bg.subtle">
    <Text>Hello</Text>
  </Box>
</Box>

페이지별 다크 모드

ColorModeProvider 컴포넌트를 사용해서 페이지의 다크 모드를 설정하세요.

<ColorModeProvider forcedTheme="dark">
  <Box bg="black" className="dark">
    <Box bg="bg.subtle">
      <Text>Hello</Text>
    </Box>
  </Box>
</ColorModeProvider>

색상 모드 강제 적용에 대해 더 알아보려면 이 next-themes 가이드를 참고하세요.