# Theme Provider (/ui/docs/react/theme-provider)
`ThemeProvider` owns the active theme. It applies the theme class to ``,
persists the choice to storage, optionally follows the OS preference, and injects
an inline script that sets the theme **before first paint** so there's no flash.
```tsx
import { ThemeProvider } from '@appica/ui-react/providers/theme-provider'
```
## Usage [#usage]
Wrap your app once, as high as possible — at your app's root, inside ``.
The example below uses Next.js's root layout; for the equivalent file in Vite,
React Router / Remix, TanStack Start, and Astro, see the
[Framework notes](/ui/docs/react/installation#framework-notes) in Installation.
```tsx title="app/layout.tsx (Next.js)"
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
Read and change the theme anywhere below it with [`useTheme`](/ui/docs/react/use-theme).
For building a toggle, see [Dark Mode](/ui/docs/react/dark-mode).
Nesting `ThemeProvider` is safe — inner providers are a passthrough. Only the outermost one owns state, so you can use
a nested provider purely to set `forcedTheme` on a subtree.
## Props [#props]
| Prop | Type | Default | Description |
| --------------------------- | ------------------------ | ---------------------------- | ------------------------------------------------------------ |
| `themes` | `string[]` | `['light', 'dark']` | Available theme names |
| `defaultTheme` | `string` | `'system'` if `enableSystem` | Theme used before a choice is stored |
| `forcedTheme` | `string` | — | Force a theme for the whole subtree (overrides storage + OS) |
| `enableSystem` | `boolean` | `true` | Respect the OS `prefers-color-scheme` |
| `enableColorScheme` | `boolean` | `true` | Set `color-scheme` on `` so native UI matches |
| `disableTransitionOnChange` | `boolean` | `false` | Suppress CSS transitions during a theme switch |
| `storageKey` | `string` | `'theme'` | `localStorage` key for the persisted choice |
| `value` | `Record` | — | Map a theme name to a custom class applied on `` |
| `nonce` | `string` | — | CSP nonce forwarded to the inline script |
| `scriptProps` | `ScriptHTMLAttributes` | — | Extra props for the inline `