Getting Started
Install and configure @wrksz/themes in your Next.js app.
Edit on GitHub
Last updated on
Installation
bun add @wrksz/themesnpm install @wrksz/themespnpm add @wrksz/themesyarn add @wrksz/themesSetup
Add ThemeProvider to your root layout. Import from @wrksz/themes/next for Next.js - this avoids the React 19 inline script warning by using useServerInsertedHTML. Add suppressHydrationWarning to <html> to prevent hydration mismatches.
import { ThemeProvider } from "@wrksz/themes/next";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
);
}Usage
Use the useTheme hook in any Client Component to read and update the current theme.
"use client";
import { useTheme } from "@wrksz/themes/client";
export function ThemeToggle() {
const { resolvedTheme, setTheme } = useTheme();
return (
<button
type="button"
onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
>
Toggle theme
</button>
);
}Import paths
Since v0.6.0| Import | Use for |
|---|---|
@wrksz/themes/next | ThemeProvider in Next.js (recommended) |
@wrksz/themes/client | useTheme, useThemeValue, ThemedImage, ClientThemeProvider |
@wrksz/themes | ThemeProvider for non-Next.js frameworks |
The API is identical to next-themes. Migrating requires changing one import line: @wrksz/themes/next instead of next-themes. See Why not next-themes? for a full comparison.
Requirements
- Next.js 16+
- React 19+
Next steps
- ThemeProvider API - all available props
- useTheme API - hook reference
- Examples - Tailwind, data attributes, scoped theming, and more