import { useTheme, Theme } from '../contexts/ThemeContext';
function SunIcon({ className }: { className?: string }) {
return (
);
}
function MoonIcon({ className }: { className?: string }) {
return (
);
}
function SystemIcon({ className }: { className?: string }) {
return (
);
}
const themeOrder: Theme[] = ['light', 'dark', 'system'];
const themeLabels: Record = {
light: 'Light mode',
dark: 'Dark mode',
system: 'System theme',
};
export default function ThemeToggle() {
const { theme, resolvedTheme, setTheme } = useTheme();
const cycleTheme = () => {
const currentIndex = themeOrder.indexOf(theme);
const nextTheme = themeOrder[(currentIndex + 1) % themeOrder.length];
setTheme(nextTheme);
};
const getIcon = () => {
if (theme === 'system') {
return ;
}
return resolvedTheme === 'dark'
?
: ;
};
return (
);
}