71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { Moon, Sun } from 'lucide-react'
|
|
import { motion } from 'framer-motion'
|
|
|
|
export function ThemeToggle() {
|
|
const [theme, setTheme] = useState<'light' | 'dark'>('light')
|
|
const [mounted, setMounted] = useState(false)
|
|
|
|
useEffect(() => {
|
|
setMounted(true)
|
|
// Check for stored preference or system preference
|
|
const stored = localStorage.getItem('theme')
|
|
if (stored === 'dark' || stored === 'light') {
|
|
setTheme(stored)
|
|
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
setTheme('dark')
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (!mounted) return
|
|
|
|
const root = document.documentElement
|
|
if (theme === 'dark') {
|
|
root.classList.add('dark')
|
|
} else {
|
|
root.classList.remove('dark')
|
|
}
|
|
localStorage.setItem('theme', theme)
|
|
}, [theme, mounted])
|
|
|
|
const toggleTheme = () => {
|
|
setTheme(prev => prev === 'light' ? 'dark' : 'light')
|
|
}
|
|
|
|
// Prevent hydration mismatch
|
|
if (!mounted) {
|
|
return (
|
|
<button className="p-2 rounded-lg bg-secondary/50 text-muted-foreground">
|
|
<Sun className="h-5 w-5" />
|
|
</button>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<motion.button
|
|
onClick={toggleTheme}
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className="relative p-2 rounded-lg bg-secondary/50 hover:bg-secondary text-muted-foreground hover:text-foreground transition-colors"
|
|
aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
|
|
>
|
|
<motion.div
|
|
initial={false}
|
|
animate={{ rotate: theme === 'dark' ? 180 : 0 }}
|
|
transition={{ duration: 0.3, ease: 'easeInOut' }}
|
|
>
|
|
{theme === 'light' ? (
|
|
<Moon className="h-5 w-5" />
|
|
) : (
|
|
<Sun className="h-5 w-5" />
|
|
)}
|
|
</motion.div>
|
|
</motion.button>
|
|
)
|
|
}
|
|
|
|
export default ThemeToggle
|