테마 메뉴

프리셋(색)과 라이트 · 다크를 한 드롭다운에서 고르는 앱 셸 도구다. 선택은 data-theme · .dark · 저장 키에 반영되고, 첫 화면은 layout 의 themeInitScript() 가 같은 키로 맞춘다.

활용 방법

상단바 메뉴

layout 의 <head> 에 themeInitScript() 를 인라인 스크립트로 넣고, 상단바에 ThemeMenu 를 둔다. 좁은 화면 드로어에는 variant="drawer" 를 쓴다.

Preview

tsx

// app/layout.tsx (서버)
import { themeInitScript } from "@duolabs-deux/ui";
<script dangerouslySetInnerHTML={{ __html: themeInitScript() }} />

// 상단바 (클라이언트)
<ThemeMenu />
<ThemeMenu variant="drawer" />

// 앱 고유 테마 · 아래 링크
<ThemeMenu
  extraThemes={brand ? [{ id: "brand", label: "브랜드", swatch: brand }] : []}
  footer={(close) => <Link href="/settings#brand" onClick={close}>브랜드 테마 바꾸기</Link>}
/>

속성

이름	타입	기본값	설명
variant	"bar" \| "drawer"	"bar"	상단바 버튼 또는 드로어 줄 버튼
projects	readonly ProjectPreset[]	PROJECTS	프리셋 목록
names	Record<string, string>	PROJECT_NAMES_KO	보이는 이름 덮어쓰기(id → 이름)
extraThemes	readonly ThemeMenuItem[]	[]	프리셋 앞에 붙는 앱 고유 테마. swatch 로 색 견본을 보인다
systems	readonly { id: string; label: string; variants?: { id; label; swatch }[] }[]	[]	앱 전체 시스템 선택지(variants 를 주면 그 시스템의 색 변형을 고른다)(contracts appSystemThemes, 첫 항목 Polaris). 둘 이상이면 맨 위에 「시스템」이 보이고 <html data-system> 을 건다. themeInitScript({ systems }) 와 함께 쓴다
footer	(close: () => void) => ReactNode	-	메뉴 맨 아래 줄(링크 · 버튼)