> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/BankkRoll/tweakcn-theme-picker/llms.txt
> Use this file to discover all available pages before exploring further.
# ThemeProvider
> React context provider for theme management using next-themes
## ThemeProvider
A wrapper around `next-themes` ThemeProvider that configures theme management for the tweakcn Theme Picker system.
Located in `registry/nextjs/components/theme-provider.tsx`
## Component Signature
```typescript theme={null}
export function ThemeProvider({ children }: { children: ReactNode }): JSX.Element
```
## Props
React children to be wrapped by the theme provider. Typically your entire application tree.
## Source Code
```typescript theme={null}
"use client";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { ReactNode } from "react";
import { allThemeValues, DEFAULT_THEME } from "@/lib/themes-config";
export function ThemeProvider({ children }: { children: ReactNode }) {
return (
{children}
);
}
```
## Configuration
The ThemeProvider is pre-configured with the following settings:
### attribute
HTML attribute used to apply the theme. The current theme value is set on the root element as `data-theme="theme-name"`.
### themes
Array of all available theme values. Includes both light and dark variants for all 45 themes (90 total values).
Examples: `["default-light", "default-dark", "catppuccin-light", "catppuccin-dark", ...]`
### defaultTheme
Initial theme applied when no user preference exists in localStorage. Set to `"default-dark"` for a dark-first experience.
### enableSystem
System theme detection disabled. Users must explicitly choose light or dark mode rather than following OS preferences.
### disableTransitionOnChange
Prevents CSS transitions during theme changes to avoid visual glitches. Theme switches happen instantly.
## Usage
### App Router (Next.js 13+)
```tsx app/layout.tsx theme={null}
import { ThemeProvider } from "@/components/theme-provider";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
Add `suppressHydrationWarning` to the `` tag to prevent hydration warnings from next-themes.
### Pages Router (Next.js 12)
```tsx pages/_app.tsx theme={null}
import { ThemeProvider } from "@/components/theme-provider";
import type { AppProps } from "next/app";
export default function App({ Component, pageProps }: AppProps) {
return (
);
}
```
## How It Works
1. **Initialization**: On mount, the provider reads the theme from localStorage or uses `DEFAULT_THEME`
2. **DOM Update**: The theme value is set as `data-theme` on the HTML element
3. **Persistence**: Theme changes are automatically saved to localStorage
4. **Context**: Provides theme state and controls via the `useTheme` hook
### HTML Output
```html theme={null}
```
## CSS Integration
Themes are applied using CSS attribute selectors:
```css globals.css theme={null}
/* Light mode colors */
[data-theme="catppuccin-light"] {
--primary: oklch(0.55 0.25 297.02);
}
/* Dark mode colors */
[data-theme="catppuccin-dark"] {
--primary: oklch(0.79 0.12 304.77);
}
```
## Client-Side Only
This component uses `"use client"` and must run in the browser. It cannot be used in Server Components directly.
```typescript theme={null}
"use client"; // Required for next-themes
```
## Dependencies
* **next-themes**: Theme management library (v0.2.1+)
* **React**: 18.0.0+
* **Next.js**: 13.0.0+ (for App Router) or 12.0.0+ (for Pages Router)
## TypeScript Support
Fully typed with TypeScript. The `children` prop is typed as `ReactNode` from React.
```typescript theme={null}
import { ReactNode } from "react";
export function ThemeProvider({ children }: { children: ReactNode }) {
// ...
}
```
## See Also
* [useTheme](/api/use-theme) - Hook for accessing theme state and controls
* [ThemeSwitcher](/api/theme-switcher) - UI component for theme selection
* [allThemeValues](/api/themes-config-exports#allthemevalues) - Complete list of theme values
* [DEFAULT\_THEME](/api/themes-config-exports#default_theme) - Default theme constant
* [next-themes Documentation](https://github.com/pacocoursey/next-themes) - Underlying library