Theme

Theme (테마)

트리의 일부를 강제로 라이트 모드나 다크 모드로 만들 때 쓰는 컴포넌트예요. 페이지 일부만 색상 모드를 다르게 하고 싶을 때 유용해요.

출처: 문서

본문

Theme은 컴포넌트 트리의 일부를 강제로 라이트 또는 다크 모드로 전환하는 컴포넌트예요. <ExampleTabs name="theme-basic" />

사용법 (Usage)

import { Theme } from "@chakra-ui/react"

<Theme appearance="dark">
  <div />
</Theme>

예시 (Examples)

중첩 (Nested)

테마는 중첩해 트리의 다른 부분에 다른 appearance를 적용할 수 있어요. 전역 appearance를 적용한 뒤 일부분만 덮어쓰고 싶을 때 유용해요.

Good to know: 이를 위해 네이티브 CSS 선택자를 사용해요.

포털 (Portalled)

asChild prop으로 popover나 modal 콘텐츠처럼 포털로 렌더링되는 요소의 appearance를 강제할 수 있어요.

페이지별 색상 모드 (Page Specific Color Mode)

페이지를 특정 색상 모드(라이트 또는 다크)로 고정하려면 전체 페이지를 Theme 컴포넌트로 감싸면 돼요.

useColorMode 훅을 사용한다면 ColorModeProvider와도 조합할 수 있어요.

import { ColorModeProvider } from "@/components/ui/color-mode"
import { Theme } from "@chakra-ui/react"

export const ForcedColorMode = ({ children }) => {
  return (
    <ColorModeProvider forcedTheme="dark">
      <Theme appearance="dark">{/* Rest of the page */}</Theme>
    </ColorModeProvider>
  )
}