A minimalist, beautifully designed theme switcher component for Next.js applications.
Smoothly switch between light, dark and system themes with a single click.
Based on the Vercel's Geist design system.
You can check a live demo on my personal website.
- 💪 Written in TypeScript
- 🌗 Light/Dark/System theme support
- 🎨 Fully customizable with Tailwind
- 🔌 Easy integration with Next.js
npm install theme-switcher-nextjs next-themesNote: This library works with
next-themesv0.1.0 and above (including the latest v0.4.x). If you already havenext-themesinstalled, you don't need to install it again.
- Next.js 13+ with App Router
- Tailwind CSS
- Make sure your
layout.tsxfile is wrapped with theThemeProviderfromnext-themes:
import { ThemeProvider } from 'next-themes'
export default function RootLayout({ children }) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
{children}
</ThemeProvider>
</body>
</html>
)
}- Import and use the
ThemeSwitchercomponent:
import { ThemeSwitcher } from 'theme-switcher-nextjs'
export default function Header() {
return (
<header>
<ThemeSwitcher />
</header>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
defaultTheme |
'light' | 'dark' | 'system' |
'system' |
Initial theme |
themes |
Array<'light' | 'dark' | 'system'> |
['light', 'dark', 'system'] |
Available themes |
size |
'sm' | 'md' | 'lg' |
'sm' |
Component size |
className |
string |
undefined |
Additional CSS classes |
includeSystem |
boolean |
true |
Whether to show the system theme option |
The component uses Tailwind CSS for styling and can be customized using the className prop:
<ThemeSwitcher
size="md"
className="bg-slate-100 dark:bg-slate-800" // custom background color
themes={['light', 'dark']} // remove system theme
/>Contributions are welcome! Please feel free to submit a Pull Request.
Licensed under the MIT License.