ThemeToggle — React Native component

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add theme-toggle

Or install the whole package and import it

pnpm add orn-ui
import { ThemeToggle } from 'orn-ui/theme-toggle';

Depends on:core (theme + icons)segmented-control

Usage

when to use — Letting the user pick light, dark or system — usually in settings.
labels — Override the three built-in strings when your product words them differently.

Demo clip not recorded yet — see MEDIA.md

Variants

Default labels

<ThemeToggle />

Custom labels

<ThemeToggle labels={{ system: 'System', light: 'Day', dark: 'Night' }} />

Full demo source

const variants: VariantDef[] = [
  { label: 'Default labels', content: <ThemeToggle /> },
  { label: 'Custom labels', content: <ThemeToggle labels={{ system: 'System', light: 'Day', dark: 'Night' }} /> },
];
return <VariantList variants={variants} />;

Props

Also accepts testID, forwarded to the root node. It exists for end-to-end tests (Maestro drives the app by the accessibility tree) and has no effect on how the component looks or behaves.

Name	Type	Default	Description
`style?`	`StyleProp<ViewStyle>`	—	—
`labels?`	`Partial<Record<ThemeMode, string>>`	—	—