'use client';
import { useTheme } from 'next-themes';
import { Box } from '@hanzo/ui'
import { useEffect, useState } from 'react';
export function ThemeToggle() {
const { setTheme, resolvedTheme } = useTheme();
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return (
);
}
const isDark = resolvedTheme === 'dark';
return (
setTheme(isDark ? 'light' : 'dark')}
className="rounded-lg p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
aria-label={`Switch to ${isDark ? 'light' : 'dark'} theme`}
>
{isDark ? (
) : (
)}
);
}