theme-switcher-nextjs
Version:
A beautifully designed theme switcher component for Next.js apps based on the Vercel's Geist design system.
96 lines (68 loc) • 2.98 kB
Markdown
# Theme Switcher for Next.js
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.
## Live demo
You can check a live demo on my [personal website](https://www.thiago.bio/).
## Features
- 💪 Written in TypeScript
- 🌗 Light/Dark/System theme support
- 🎨 Fully customizable with Tailwind
- 🔌 Easy integration with Next.js
## Installation
```bash
npm install theme-switcher-nextjs next-themes
```
> **Note**: This library works with `next-themes` v0.1.0 and above (including the latest v0.4.x). If you already have `next-themes` installed, you don't need to install it again.
## Prerequisites
- Next.js 13+ with App Router
- Tailwind CSS
## Usage
1. Make sure your `layout.tsx` file is wrapped with the `ThemeProvider` from `next-themes`:
```tsx
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>
)
}
```
2. Import and use the `ThemeSwitcher` component:
```tsx
import { ThemeSwitcher } from 'theme-switcher-nextjs'
export default function Header() {
return (
<header>
<ThemeSwitcher />
</header>
)
}
```
## Props
| 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|
## Customization
The component uses Tailwind CSS for styling and can be customized using the `className` prop:
```tsx
<ThemeSwitcher
size="md"
className="bg-slate-100 dark:bg-slate-800" // custom background color
themes={['light', 'dark']} // remove system theme
/>
```
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
Licensed under the MIT License.