Live Docs

Navigation

Brand /

stable

Theme Menu

Pemilih mode tampilan (terang / gelap / sistem) berbentuk dropdown dengan ikon trigger yang otomatis menyesuaikan mode aktif.

import { ThemeMenu } from "@naraya/ui";

Overview

ThemeMenu adalah varian dropdown dari ThemeToggle: ikonnya berganti otomatis (Sun / Moon / Monitor) mengikuti mode aktif, dan menampilkan pilihan Light / Dark / System. Keduanya membaca ThemeProvider (sudah ada via AppShell), jadi pilihan langsung persisten.

Examples

Theme Menu (dropdown)

<ThemeMenu />

Theme Toggle (segmented)

Varian 3-tombol kalau kamu mau semua opsi langsung terlihat.

<ThemeToggle />

Props

PropTypeDefaultDescription
classNamestring—Class tambahan untuk wrapper.

State mode diambil dari ThemeProvider. Untuk mengontrol mode secara manual, pakai hook useTheme() (mode, resolved, setMode).

Accessibility

  • Trigger berupa tombol dengan label; menu bisa ditutup via Escape atau klik di luar.
  • Opsi aktif ditandai centang, bukan hanya warna.
  • Anti-FOUC script mencegah kedipan mode saat halaman dimuat ulang.