React Native Theming
Apply semantic tokens, follow system appearance, and verify light and dark themes. Learn how with Lumen for React Native.
Appearance
Choose and change the theme
LumenProvider follows the device appearance by default. Pass light or dark when an in-app preference should override the system, and keep the provider near the application root so every screen receives the same semantic colors and foundation values.
<LumenProvider scheme="system">
<AppNavigation />
</LumenProvider>type Appearance = 'light' | 'dark'
const [appearance, setAppearance] = useState<Appearance>('light')
return (
<LumenProvider scheme={appearance}>
<AppNavigation />
</LumenProvider>
)Style with semantic roles
Components consume semantic roles such as canvas, surface, ink, brand, success, warning, and danger. Keep product code on those roles rather than assigning one-off colors to individual components.
Verify both appearances
- Switch the device between light and dark while the app is open.
- Check text and icon contrast in default, disabled, error, and loading states.
- Test the largest supported font scale and screen-reader labels in both schemes.