reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
ThemeSwitcher
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

ThemeSwitcher

Shell

Switch theme presets and light, dark, or system appearance.

display
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { ThemeSwitcher } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

테마 선택기

Theme

Compact 테마 선택기

ThemeSwitcher

PropTypeDefaultDescription
labelsThemeSwitcherLabels—i18n용 라벨 오버라이드
View test results

테스트 커버리지

2026년 7월 9일19/19 통과
19성공
0실패
19전체
  • 마운트 후 localStorage의 preset/mode를 반영한다
  • legacy opt-theme 키를 opt-preset으로 마이그레이션한다
  • 다른 탭의 storage 변경을 반영한다
  • 5개의 테마 버튼을 렌더링한다
  • 기본 heading을 표시한다
  • 커스텀 labels를 적용한다
  • 테마 버튼 클릭 시 data-theme 속성이 변경된다
  • compact variant: heading 없이 프리셋 5개 + 모드 3개 버튼을 렌더링한다
  • compact variant: 테마 전환이 동작한다
  • default variant: 모드 토글 Light/Dark/System 버튼이 렌더링된다
  • Dark 모드 선택 시 compound theme에 -dark 접미사가 붙는다
  • Natural 프리셋은 모드 무시하고 항상 light이다
  • Pro 프리셋은 Light 모드에서 pro를 반환한다
  • THEME_REGISTRY 변경이 ThemeSwitcher 출력에 그대로 반영된다
  • modeLabels로 light/dark/system 라벨을 i18n 한다
  • compact 모드 mode 버튼의 title도 modeLabels를 따른다
  • customPresetEditor slot이 default variant에 렌더링된다
  • 활성 프리셋 버튼에 aria-pressed가 부여된다
  • controlled props로 provider 없이 로컬 프리셋 선택기를 렌더링한다

Related components

opt-ui

FaqAccordion

Shells

Organize FAQ questions and answers with Composite and Disclosure components.

opt-ui

EnvPanel

Shells

Browse environment variables with collapsible environment groups and Composite navigation.

opt-ui

BranchSelect

Shells

Choose a Git branch with a wrapper around the Select primitive.

opt-ui

DesignGuidePanel

Shells

Consult six design-system reference sections covering primitives, keyboard patterns, Tailwind selectors, and accessibility attributes.

opt-ui

QuickActions

Shells

Present frequent actions in a grid or list with keyboard shortcut labels.

opt-ui

TeamMemberList

Shells

Show team members and online status in list, compact, or avatar-only layouts.

PreviousComparisonSelectorNextPromptTemplate