29 lines
668 B
TypeScript
29 lines
668 B
TypeScript
'use client'
|
|
|
|
import { useTheme } from 'next-themes'
|
|
import { useState, useEffect } from 'react'
|
|
import { Sun, Moon } from 'lucide-react'
|
|
|
|
export default function ThemeToggle() {
|
|
const [mounted, setMounted] = useState(false)
|
|
const { theme, setTheme } = useTheme()
|
|
|
|
useEffect(() => {
|
|
setMounted(true)
|
|
}, [])
|
|
|
|
if (!mounted) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<button
|
|
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
|
className="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200"
|
|
>
|
|
{theme === 'dark' ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
|
|
</button>
|
|
)
|
|
}
|
|
|