'use client';
import { useEffect, useState } from 'react';
import { Moon, Sun } from 'lucide-react';
type Theme = 'light' | 'dark';
export default function DarkModeToggle() {
const [isDark, setIsDark] = useState(false);
const [isMounted, setIsMounted] = useState(false);
// Initialize theme from localStorage and system preference
useEffect(() => {
setIsMounted(true);
// Check localStorage first, then system preference
const savedTheme = localStorage.getItem('theme') as Theme | null;
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const shouldBeDark = savedTheme ? savedTheme === 'dark' : prefersDark;
setIsDark(shouldBeDark);
updateTheme(shouldBeDark);
}, []);
// Update theme when isDark changes
useEffect(() => {
if (isMounted) {
updateTheme(isDark);
}
}, [isDark, isMounted]);
const updateTheme = (dark: boolean) => {
const htmlElement = document.documentElement;
const theme: Theme = dark ? 'dark' : 'light';
if (dark) {
htmlElement.classList.add('dark');
} else {
htmlElement. classList.remove('dark');
}
localStorage.setItem('theme', theme);
// Optional: Dispatch custom event for other components to listen to
window.dispatchEvent(
new CustomEvent('themechange', { detail: { theme } })
);
};
const toggleTheme = () => {
setIsDark((prev) => !prev);
};
// Prevent hydration mismatch
if (! isMounted) {
return (
);
}
return (
);
}