Dark mode

Dark mode (다크 모드)

appearance를 사용해 다크 모드를 관리하고 통합하는 방법이에요.

출처: 문서

개요 (Overview)

라이트 모드와 다크 모드는 기본적으로 지원돼요. 추가적인 디자인이나 스타일링 없이도 손쉽게 appearance를 전환할 수 있어요.

King Krule – The OOZ

A dark and introspective album that showcases a distinctive blend of genres.

King Krule – The OOZ

A dark and introspective album that showcases a distinctive blend of genres.

기본 사용법 (Basic usage)

기본적으로 루트 Theme의 appearance는 light예요. 다른 appearance를 지정하려면 appearance prop으로 전달하면 돼요. 그러면 테마가 지정한 설정을 강제로 사용해요.

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

시스템 appearance 상속 (Inheriting system appearance)

사용자의 시스템 환경 설정에서 appearance를 상속하는 것은 흔한 요구예요.

이것은 SSR, SSG, 클라이언트 사이드 하이드레이션을 고려할 때 겉보기보다 훨씬 복잡한 문제예요. 구현을 쉽게 하기 위해 테마 전환 라이브러리와 통합하는 것을 권장해요.

next-themes 사용 (With next-themes)

next-themes와의 통합은 간단하고 직관적이에요. Radix Themes가 일치하는 class 이름을 구현하고 있기 때문이에요.

다크 모드를 활성화하려면 next-themes의 <ThemeProvider>를 attribute="class"로 사용해 주세요.

import { Theme } from "@radix-ui/themes";

import { ThemeProvider } from "next-themes";

export default function () {
  return (
    <ThemeProvider attribute="class">
      <Theme>
        <MyApp />
      </Theme>
    </ThemeProvider>
  );
}

<Theme appearance={resolvedTheme}>처럼 설정하려고 하지 마세요. 대신 next-themes가 제공하는 class 전환만 사용해 주세요. 그래야 next-themes가 초기 렌더링 시 appearance 플래시를 막을 수 있어요.

다른 라이브러리와 사용 (With other libraries)

class 전환을 지원하는 어떤 라이브러리든 호환돼요. 추가된 class 이름이 Radix Themes가 지원하는 것과 일치하는지만 확인하면 돼요.

• className="light"
• className="light-theme"
• className="dark"
• className="dark-theme"

더 알아보기 (Learn more)

• 시스템 다크 모드를 통합할 때는 next-themes 같은 class-스위칭 라이브러리와 함께 사용하는 걸 권장해요.