FoundationsReact Native

Theme

Provide generated semantic colors, spacing, radii, typography, motion, and elevation to native components.

Public APILumenProviderReact Native

Native example

Use Theme

Mount the theme once near the application root. Read semantic roles from the native theme object instead of copying hexadecimal values into feature code.

View verified React Native runtime capture

Theme rendered in the Expo web renderer Lumen playground — Verified runtime captureExpo web renderer

<LumenProvider scheme="system">
  <AppContent />
</LumenProvider>

Reference

Public API

The primary shared and platform-specific options exposed by LumenProvider.

API	Values or type	Default	Description
scheme	`"light" \| "dark" \| "system"`	`"system"`	Selects the active native color scheme.
children	`ReactNode`	`Required`	Provides Lumen theme values to the descendant tree.

Native behavior

Design and accessibility

When to use it

Mount the theme once near the application root. Read semantic roles from the native theme object instead of copying hexadecimal values into feature code.

Accessibility

The active color scheme follows the platform environment unless the application chooses an explicit light or dark mode.

Shared component

Available on other platforms

Apple / SwiftUI Android / Compose