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. Add suppressHydrationWarning to <html> to prevent hydration warnings caused by the inline theme script that runs before React hydrates.
import { ThemeProvider } from "@wrksz/themes";
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>
);
}Requirements
- Next.js 16+
- React 19+
@wrksz/themes is a drop-in replacement for next-themes - no API changes needed. See Why not next-themes? for a full comparison.
Next steps
- ThemeProvider API - all available props
- useTheme API - hook reference
- Examples - Tailwind, data attributes, scoped theming, and more