Dark mode

외관을 사용하여 다크 모드를 관리하고 통합합니다.

Overview

라이트 모드와 다크 모드는 기본적으로 지원되며, 추가 디자인이나 스타일링 없이 쉽게 외관을 전환할 수 있습니다.

King Krule – The OOZ

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

Listen Now

King Krule – The OOZ

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

Listen Now

Basic usage

기본적으로 루트 Theme 외관은 light입니다. 다른 외관을 설정하려면 appearance prop을 통해 전달하세요. 이렇게 하면 테마가 지정된 설정을 강제로 사용하게 됩니다.

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

Inheriting system appearance

일반적인 요구 사항은 사용자의 시스템 환경 설정에서 외관 설정을 상속받는 것입니다.

이것은 SSR, SSG 및 클라이언트 측 수화 고려 사항으로 인해 해결하기 복잡한 문제입니다. 구현을 쉽게 하기 위해 테마 전환 라이브러리와 통합하는 것을 권장합니다.

With next-themes

next-themes와의 통합은 간단하고 직관적입니다. confy-ui Themes는 일치하는 클래스 이름을 구현합니다.

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

import { Theme } from "@confy-ui/react/themes";
import { ThemeProvider } from "next-themes";

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

With other libraries

클래스 전환을 지원하는 모든 라이브러리는 호환됩니다. Confy-ui Themes에서 지원하는 클래스 이름이 일치하도록 확인해야 합니다:

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