Theme overview
Theme overview (테마 개요)
Theme 컴포넌트로 UI의 느낌과 모습을 바꾸는 방법이에요.
출처: 문서
구조 (Anatomy)
Theme 컴포넌트는 애플리케이션의 전반적인 시각적 모습을 정의해요. 최소한의 설정 옵션을 전달해 커스터마이징할 수 있어요.
<Theme accentColor="mint" grayColor="gray" panelBackground="solid" scaling="100%" radius="full">
<ThemesVolumeControlExample />
</Theme>
시작하기 좋게 잘 조율된 기본값이 제공되지만, 앱에 맞는 시각적 스타일을 찾기 위해 모든 옵션을 자유롭게 실험해 보세요. Playground에서 각 옵션이 어떤 효과를 내는지 확인할 수 있어요.
변형 (Variants)
Variants는 시각적 계층을 만들고 상대적 중요도를 전달하는 데 사용되는 컴포넌트의 시각적 변형이에요.
각 컴포넌트는 서로 다른 variant 집합을 제공하지만, 모두 서로 일관되고 보완되도록 설계됐어요.
<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)
컴포넌트 variant와 커스터마이징된 테마 설정을 조합하면 무수히 많은 독특한 인터페이스를 만들 수 있어요.
예를 들어 다음과 같은 것을 만들 수 있어요.
또는 그 외 다양한 방식의 처리와 스타일을 만들 수 있어요.
Your profile
Name
Emily Adams
Username
@emilyadams
Privacy
[x]Display my listening history[ ]Everyone can follow my activity[x]Show my playlists in search
Danger zone
Reset recommendationsDelete profile
Invoice paid
You paid $17,975.30. A receipt copy was sent to [email protected]
토큰 (Tokens)
토큰은 테마 값에 직접 접근할 수 있게 해 주며, 자신만의 테마 컴포넌트를 만들고 커스터마이징하는 유연성을 제공해요.
사용 가능한 모든 테마 토큰은 소스 코드를 참고하거나, 각 토큰 유형에 대한 자세한 내용은 관련 테마 페이지를 참고해 주세요.
테마의 타이포그래피 요소를 사용하고 커스터마이징하는 방법.
간격 스케일과 사용 가능한 스케일링 옵션을 살펴보세요.
고저차·깊이·그림자를 효과적으로 사용하고 속성을 커스터마이징하세요.
더 알아보기 (Learn more)
- 색상, 타이포그래피, 간격, 반경, 그림자, 커서 등 테마를 구성하는 각 토큰 문서로 이어져요.