ThemeToggle

@hua-labs/ui

v1.1.0

라이트, 다크, 시스템 테마 간 전환을 위한 토글 컴포넌트입니다. ThemeProvider와 함께 사용합니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { ThemeToggle } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

스타일 변형

Button

Icon

Switch

크기

Small

Medium

Large

라벨 포함

네비게이션 컨텍스트

HUA Labs

Props

이름	타입	기본값	설명
`variant`	`"button" \| "icon" \| "switch"`	`"button"`	토글 스타일 변형
`size`	`"sm" \| "md" \| "lg"`	`"md"`	토글 크기
`showLabel`	`boolean`	`false`	라벨 텍스트 표시
`label`	`{ light?: string; dark?: string; system?: string }`	-	커스텀 라벨 텍스트
`dot`	`string`	-
`style`	`React.CSSProperties`	-

코드 예시

docs:common.basicUsagetsx

1import { ThemeToggle } from '@hua-labs/ui';
2 
3// Button style (default)
4<ThemeToggle />
5 
6// Icon only
7<ThemeToggle variant="icon" />
8 
9// Switch style
10<ThemeToggle variant="switch" />

docs:components.themeToggle.examples.withLabeltsx

1<ThemeToggle
2  showLabel
3  label={{
4    light: "Light Mode",
5    dark: "Dark Mode",
6    system: "System"
7  }}
8/>

docs:components.themeToggle.examples.sizestsx

1<ThemeToggle variant="icon" size="sm" />
2<ThemeToggle variant="icon" size="md" />
3<ThemeToggle variant="icon" size="lg" />

필수 조건

ThemeToggle은 ThemeProvider 내부에서 사용해야 합니다. HuaProvider를 사용하면 자동으로 설정됩니다.

접근성

•포커스 링: 키보드 탐색을 위한 포커스 링 표시
•클릭 영역: 접근성을 위한 최소 40px 터치 영역
•애니메이션: 상태 전환 시 부드러운 애니메이션

EmptyState LanguageToggle