사용법
하나의 스위치로 라이트와 다크 테마 상태를 전환해요.
인터페이스
ThemeToggleButtonProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| dark | boolean | — | 제어 다크 모드 상태 |
| defaultDark | boolean | false | 초기 다크 모드 상태 |
| onDarkChange | (dark: boolean) => void | — | 테마 상태 변경 콜백 |
| lightIcon* | ReactNode | — | 라이트 테마 아이콘 |
| darkIcon* | ReactNode | — | 다크 테마 아이콘 |
| lightLabel | string | 라이트 테마로 전환 | 라이트 전환 라벨 |
| darkLabel | string | 다크 테마로 전환 | 다크 전환 라벨 |
| className | string | — | 루트 클래스 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수 |
ThemeToggleButton 컴포넌트 Props 표
가져오기
모션 CSS는 @goldtreedev/ui/motion.css를 함께 import해요.
@import "@goldtreedev/ui/motion.css";
import { ThemeToggleButton } from "@goldtreedev/ui";