37 lines
1022 B
TypeScript
37 lines
1022 B
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { motion } from 'framer-motion'
|
|
import { Moon, Sun } from 'lucide-react'
|
|
|
|
export default function DarkModeToggle() {
|
|
const [darkMode, setDarkMode] = useState(false)
|
|
|
|
useEffect(() => {
|
|
if (typeof window !== 'undefined') {
|
|
const isDarkMode = localStorage.getItem('darkMode') === 'true'
|
|
setDarkMode(isDarkMode)
|
|
document.documentElement.classList.toggle('dark', isDarkMode)
|
|
}
|
|
}, [])
|
|
|
|
const toggleDarkMode = () => {
|
|
const newDarkMode = !darkMode
|
|
setDarkMode(newDarkMode)
|
|
localStorage.setItem('darkMode', newDarkMode.toString())
|
|
document.documentElement.classList.toggle('dark', newDarkMode)
|
|
}
|
|
|
|
return (
|
|
<motion.button
|
|
onClick={toggleDarkMode}
|
|
className="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200"
|
|
whileHover={{ scale: 1.1 }}
|
|
whileTap={{ scale: 0.9 }}
|
|
>
|
|
{darkMode ? <Sun size={24} /> : <Moon size={24} />}
|
|
</motion.button>
|
|
)
|
|
}
|
|
|