theme-toggle.tsx•1.12 kB
'use client'
import { useTheme } from 'next-themes'
import { Sun, Moon } from 'lucide-react'
import { useEffect, useState } from 'react'
export default function ThemeToggle(): React.JSX.Element {
const [mounted, setMounted] = useState(false)
const { theme, setTheme } = useTheme()
useEffect(() => {
setMounted(true)
}, [])
if (!mounted) {
return (
<div className='w-9 h-9 rounded-lg bg-gray-100 dark:bg-gray-800 animate-pulse' />
)
}
return (
<button
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
className='relative w-9 h-9 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors duration-200 flex items-center justify-center group'
aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
>
<Sun className='h-4 w-4 text-gray-600 dark:text-gray-400 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0' />
<Moon className='absolute h-4 w-4 text-gray-600 dark:text-gray-400 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100' />
</button>
)
}