File size: 1,118 Bytes
f6d0a88 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | import { useState, useEffect } from 'react'
import { Moon, Sun } from 'lucide-react'
export const ThemeToggle = () => {
const [isDark, setIsDark] = useState(false)
useEffect(() => {
const savedTheme = localStorage.getItem('theme') || 'light'
if (savedTheme === 'dark') {
setIsDark(true)
document.documentElement.dataset.theme = 'dark'
} else {
setIsDark(false)
delete document.documentElement.dataset.theme
}
}, [])
const toggleTheme = () => {
if (isDark) {
delete document.documentElement.dataset.theme
localStorage.setItem('theme', 'light')
setIsDark(false)
} else {
document.documentElement.dataset.theme = 'dark'
localStorage.setItem('theme', 'dark')
setIsDark(true)
}
}
return (
<button className="theme-toggle" onClick={toggleTheme} aria-label="Toggle theme">
{isDark ? <Sun size={20} /> : <Moon size={20} />}
</button>
)
}
export const AnimatedBackground = () => (
<div className="animated-bg">
<div className="bg-orb orb-1"></div>
<div className="bg-orb orb-2"></div>
</div>
)
|