46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { Moon, Sun } from "lucide-react"
|
|
|
|
export function ThemeToggle() {
|
|
const [isDark, setIsDark] = useState(false)
|
|
|
|
useEffect(() => {
|
|
// Default is light; only go dark if explicitly saved as 'dark'
|
|
const savedTheme = localStorage.getItem('theme');
|
|
if (savedTheme === 'dark') {
|
|
document.documentElement.classList.add('dark');
|
|
setIsDark(true);
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
setIsDark(false);
|
|
}
|
|
}, [])
|
|
|
|
const toggleTheme = () => {
|
|
const nextIsDark = !isDark
|
|
if (nextIsDark) {
|
|
document.documentElement.classList.add('dark')
|
|
localStorage.setItem('theme', 'dark')
|
|
setIsDark(true)
|
|
window.dispatchEvent(new CustomEvent("pragativeer-theme-switched", { detail: { theme: 'dark' } }))
|
|
} else {
|
|
document.documentElement.classList.remove('dark')
|
|
localStorage.setItem('theme', 'light')
|
|
setIsDark(false)
|
|
window.dispatchEvent(new CustomEvent("pragativeer-theme-switched", { detail: { theme: 'light' } }))
|
|
}
|
|
}
|
|
|
|
return (
|
|
<button
|
|
onClick={toggleTheme}
|
|
className="p-2 rounded-xl hover:bg-secondary/80 transition-colors border border-transparent hover:border-border text-muted-foreground hover:text-foreground"
|
|
aria-label="Toggle Dark Mode"
|
|
>
|
|
{isDark ? <Sun size={18} /> : <Moon size={18} />}
|
|
</button>
|
|
)
|
|
}
|