Theme overview

UI의 모양과 느낌을 변경하기 위해 Theme 구성 요소를 사용하세요.

Anatomy

Theme 구성 요소는 애플리케이션의 전반적인 시각적 모양을 정의합니다. 최소한의 구성 옵션을 전달하여 사용자 정의할 수 있습니다.

<Theme
	accentColor="mint"
	grayColor="gray"
	panelBackground="solid"
	scaling="100%"
	radius="full"
>
	<ThemesVolumeControlExample />
</Theme>

잘 조정된 기본값 세트가 제공되어 시작할 수 있지만, 모든 사용 가능한 옵션을 사용하여 애플리케이션에 적합한 시각적 스타일을 찾는 것을 두려워하지 마세요. 각 옵션이 미치는 영향을 확인하려면 Playground를 확인하세요.

Variants

변형은 구성 요소의 시각적 변형으로, 시각적 계층을 생성하고 상대적 중요성을 전달하는 데 사용됩니다.

각 구성 요소는 서로 일관되고 보완적으로 설계된 다양한 변형 세트를 제공합니다.

<Flex gap="3" align="center">
	<Button variant="classic">
		Get started <ArrowRightIcon />
	</Button>
	<Button variant="solid">
		Get started <ArrowRightIcon />
	</Button>
	<Button variant="soft">
		Get started <ArrowRightIcon />
	</Button>
</Flex>

Examples

구성 요소 변형과 사용자 정의 테마 설정을 조합하여 다양한 독특한 인터페이스를 만들 수 있습니다.

예를 들어 다음과 같은 것을 만들 수 있습니다:

• Music applications
• Ecommerce product elements
• SaaS dashboards

또는 다양한 처리 및 스타일을 가진 수많은 인터페이스를 만들 수 있습니다.

Tokens

토큰은 테마 값에 직접 접근할 수 있게 해주며, 사용자 정의 테마 구성 요소를 구축하고 사용자 정의할 수 있는 유연성을 제공합니다.