ThemeToggle - OLUN. Design System

ThemeToggle: 36px icon button으로 현재 theme를 반전합니다.
ThemeFab: 화면 우하단에 고정되는 floating theme action입니다.
useOlunTheme: resolved theme, setTheme, toggleTheme를 같은 저장/전환 규칙으로 제공합니다.
transition: 기본 전환은 motion 토큰의 slow 리듬을 따르고, 감소모션 환경에서는 fast 리듬으로 줄어듭니다.

아이콘 버튼

ThemeToggle

코드 보기tsx

import { ThemeToggle } from "@olundot/ui";

export function HeaderThemeToggle() {
  return <ThemeToggle />;
}

Floating 버튼

ThemeFab square/circle

화면 우하단 theme action 위치를 확인합니다.

코드 보기tsx

import { ThemeFab } from "@olundot/ui";

export function FloatingThemeAction() {
  return <ThemeFab variant="circle" />;
}

공유 theme hook

useOlunTheme

미연결 preview: hook

코드 보기tsx

import { useOlunTheme } from "@olundot/ui";

export function ThemeStatus() {
  const { resolvedTheme, setTheme, toggleTheme } = useOlunTheme();

  return (
    <div>
      <p>현재 모드: {resolvedTheme}</p>
      <button type="button" onClick={() => toggleTheme()}>
        전환
      </button>
      <button type="button" onClick={() => setTheme("dark", { duration: "slow" })}>
        다크 모드
      </button>
    </div>
  );
}