ClientThemeProvider
Theme provider for use inside Client Components.
Last updated on
ClientThemeProvider is the client-side counterpart of ThemeProvider. Use it when you need a nested provider inside a Client Component - ThemeProvider renders an inline <script> which is not allowed in Client Components.
"use client";
import { ClientThemeProvider } from "@wrksz/themes/client";
export function AdminShell({ children }: { children: React.ReactNode }) {
return (
<ClientThemeProvider forcedTheme="dark">
{children}
</ClientThemeProvider>
);
}ThemeProvider vs ClientThemeProvider
ThemeProvider | ClientThemeProvider | |
|---|---|---|
| Renders inline script | Yes - prevents flash on load | No |
| Use in Server Components | Yes | No |
| Use in Client Components | No | Yes |
| Supports all props | Yes | Yes |
For your root layout, always use ThemeProvider. Use ClientThemeProvider only for nested providers deeper in the tree.
Props
Accepts the same props as ThemeProvider, with one exception: the nonce prop is not used since ClientThemeProvider renders no inline script.
Examples
Scoped theming
Apply an independent theme to a specific section of your app by combining target and storage="none":
// app/landing/layout.tsx
export default function LandingLayout({ children }) {
return (
<ThemeProvider forcedTheme="dark" target="#landing-root" storage="none">
<div id="landing-root">{children}</div>
</ThemeProvider>
);
}
// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
return (
<ThemeProvider forcedTheme="light" target="#dashboard-root" storage="none">
<div id="dashboard-root">{children}</div>
</ThemeProvider>
);
}#landing-root { --bg: #0a0a0a; --fg: #fafafa; }
#dashboard-root { --bg: #ffffff; --fg: #0a0a0a; }Nested provider in a Client Component
"use client";
import { ClientThemeProvider, useTheme } from "@wrksz/themes/client";
export function Sidebar({ children }: { children: React.ReactNode }) {
return (
<ClientThemeProvider storageKey="sidebar-theme">
{children}
</ClientThemeProvider>
);
}Each ClientThemeProvider maintains its own independent theme state - nested providers do not affect each other.