ThemeProvider

Theme provider component for configuring the theme.

ThemeProvider

ThemeProvider is the root component that provides theme context to your application.

Import

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

Usage

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

function App() {
  return (
    <ThemeProvider>
      <AppContent />
    </ThemeProvider>
  );
}

Props

Theme Configuration

Runtime Behavior

Legacy Support

Toast Configuration

Examples

Basic Setup

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

function App() {
  return (
    <ThemeProvider>
      <Text>Hello World</Text>
    </ThemeProvider>
  );
}

Custom Accent Color

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

Dark Mode

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

System Appearance

<ThemeProvider appearance="inherit">
  <App />
</ThemeProvider>

Custom Radius

<ThemeProvider radius="large">
  <App />
</ThemeProvider>

Custom Gray Scale

<ThemeProvider grayColor="gray">
  <App />
</ThemeProvider>

Full Configuration

<ThemeProvider
  accentColor="crimson"
  grayColor="mauve"
  panelBackground="translucent"
  radius="large"
  scaling="105%"
  appearance="dark"
>
  <App />
</ThemeProvider>

Dynamic Theme

function App() {
  const [appearance, setAppearance] = useState('light');
  const [accentColor, setAccentColor] = useState('blue');

  return (
    <ThemeProvider
      appearance={appearance}
      accentColor={accentColor}
    >
      <Flex direction="column" gap={3}>
        <SegmentedControl.Root
          value={appearance}
          onValueChange={setAppearance}
        >
          <SegmentedControl.Item value="light">Light</SegmentedControl.Item>
          <SegmentedControl.Item value="dark">Dark</SegmentedControl.Item>
        </SegmentedControl.Root>

        <Select value={accentColor} onValueChange={setAccentColor}>
          <Select.Item value="blue">Blue</Select.Item>
          <Select.Item value="green">Green</Select.Item>
          <Select.Item value="crimson">Crimson</Select.Item>
        </Select>

        <AppContent />
      </Flex>
    </ThemeProvider>
  );
}

Nested Themes

<ThemeProvider accentColor="blue">
  <Flex direction="column" gap={3}>
    <Text>Blue theme</Text>

    <ThemeProvider accentColor="green">
      <Text>Green theme (nested)</Text>
    </ThemeProvider>
  </Flex>
</ThemeProvider>

Available Colors

Accent Colors

• indigo (default)
• amber
• blue
• bronze
• brown
• crimson
• cyan
• gold
• grass
• green
• iris
• jade
• lime
• mint
• orange
• pink
• plum
• purple
• red
• ruby
• sky
• teal
• tomato
• violet
• yellow

Gray Colors

• mauve (default)
• gray
• olive
• sage
• sand
• slate

Related

• useTheme - Theme hook
• Colors - Color system
• Dark Mode - Dark mode guide