1.0.1 • Published 2 years ago
nextjs-theme-toggle v1.0.1
Next.js Theme Toggle
A simple, customizable theme toggle switch for Next.js projects using a theme provider such as next-themes.
Features
- Easy integration with Next.js and next-themes
- Minimal and clean design
- Supports hiding on small screens
Installation
To install the package, run the following command:
npm install nextjs-theme-toggleor if you are using yarn:
yarn add nextjs-theme-toggleUsage
To use the ThemeToggle component, simply import it into your project and add it to your JSX:
import ThemeToggle from 'nextjs-theme-toggle';
import { useTheme } from 'next-themes'
function MyApp() {
return (
<div>
{/* Your other components */}
<ThemeToggle useTheme={useTheme} hideOnSmallScreens />
</div>
);
}Make sure to add next-themes to your Next.js project.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
useTheme | () => { theme?: string, setTheme: (theme: string) => void } | - | Function to provide theme and setTheme methods from a theme provider (typically next-themes) |
hideOnSmallScreens | boolean | false | Hides the toggle on screens narrower than 1065px |
Contributing
Contributions are welcome! Please submit a pull request or create an issue for any bug reports or feature requests.
License
ISC