ThemeProvider

API reference for the ThemeProvider component.

ThemeProvider

The ThemeProvider component provides theme context to all child components. It should wrap your entire application.

Import

import { ThemeProvider } from 'radix-native-ui';

Usage

import { ThemeProvider } from 'radix-native-ui';

export default function App() {
  return (
    <ThemeProvider>
      {/* Your app content */}
    </ThemeProvider>
  );
}

Props

Available Accent Colors

Color	Description
amber	Warm yellow-orange
blue	Classic blue
bronze	Metallic brown
brown	Earth brown
crimson	Deep red
cyan	Light blue-green
gold	Rich golden
grass	Natural green
green	Standard green
indigo	Purple-blue (default)
iris	Light purple
jade	Cool green
lime	Bright green
mint	Soft green
orange	Vibrant orange
pink	Light red
plum	Deep purple
purple	Standard purple
red	Standard red
ruby	Jewel red
sky	Light blue
teal	Blue-green
tomato	Red-orange
violet	Blue-purple
yellow	Bright yellow

Available Gray Scales

Scale	Description
gray	Standard gray (default)
mauve	Warm gray with purple tint
olive	Green-tinted gray
sage	Soft green-tinted gray
sand	Warm beige-tinted gray
slate	Cool blue-tinted gray

Examples

Basic Setup

<ThemeProvider>
  <App />
</ThemeProvider>

With Custom Accent Color

<ThemeProvider accentColor="blue">
  <App />
</ThemeProvider>

With Dark Mode

<ThemeProvider mode="dark">
  <App />
</ThemeProvider>

Full Configuration

<ThemeProvider
  mode="light"
  accentColor="indigo"
  grayColor="mauve"
  radius="medium"
  scaling={1}
  onModeChange={(mode) => console.log('Mode changed:', mode)}
>
  <App />
</ThemeProvider>

With Mode Toggle

function AppWithTheme() {
  const [mode, setMode] = useState<'light' | 'dark'>('light');

  return (
    <ThemeProvider
      mode={mode}
      onModeChange={setMode}
    >
      <App />
    </ThemeProvider>
  );
}

Related

• useTheme Hook
• useThemeMode Hook
• useThemeActions Hook
• Colors