Skip to main content

Documentation Index

Fetch the complete documentation index at: https://copylabs.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

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

ColorDescription
amberWarm yellow-orange
blueClassic blue
bronzeMetallic brown
brownEarth brown
crimsonDeep red
cyanLight blue-green
goldRich golden
grassNatural green
greenStandard green
indigoPurple-blue (default)
irisLight purple
jadeCool green
limeBright green
mintSoft green
orangeVibrant orange
pinkLight red
plumDeep purple
purpleStandard purple
redStandard red
rubyJewel red
skyLight blue
tealBlue-green
tomatoRed-orange
violetBlue-purple
yellowBright yellow

Available Gray Scales

ScaleDescription
grayStandard gray (default)
mauveWarm gray with purple tint
oliveGreen-tinted gray
sageSoft green-tinted gray
sandWarm beige-tinted gray
slateCool 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>
  );
}