polen
Version:
A framework for delightful GraphQL developer portals
30 lines • 1.31 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { DesktopIcon, MoonIcon, SunIcon } from '@radix-ui/react-icons';
import { IconButton } from '@radix-ui/themes';
import { useTheme } from '../contexts/ThemeContext.js';
export const ThemeToggle = () => {
const { appearance, toggleTheme, preference } = useTheme();
const handleClick = () => {
toggleTheme();
};
// Determine next state in cycle: system → light → dark → system
const getNextTheme = () => {
if (!preference || preference === 'system')
return 'light';
if (preference === 'light')
return 'dark';
return 'system';
};
const getIcon = () => {
// Show icon based on preference, not appearance
if (!preference || preference === 'system') {
return _jsx(DesktopIcon, { width: '18', height: '18' });
}
if (preference === 'light') {
return _jsx(SunIcon, { width: '18', height: '18' });
}
return _jsx(MoonIcon, { width: '18', height: '18' });
};
return (_jsx(IconButton, { size: '2', variant: 'ghost', color: 'gray', onClick: handleClick, "aria-label": `Switch to ${getNextTheme()} theme`, style: { cursor: `pointer` }, children: getIcon() }));
};
//# sourceMappingURL=ThemeToggle.js.map