28 lines
829 B
TypeScript
28 lines
829 B
TypeScript
import { useTheme } from '../theme/ThemeProvider';
|
|
|
|
/**
|
|
* Visible theme switcher (requirements FR-3, Functional Design Q1/Q7).
|
|
* Rendered as a small icon/swatch button in the nav.
|
|
*/
|
|
export function ThemeToggle() {
|
|
const { theme, toggleTheme } = useTheme();
|
|
const isPurple = theme === 'purple';
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={toggleTheme}
|
|
aria-label="Wissel kleurthema"
|
|
aria-pressed={isPurple}
|
|
data-testid="theme-toggle-button"
|
|
className="font-mono flex h-8 w-8 items-center justify-center rounded-full border border-line text-xs font-medium text-text transition-colors hover:border-accent-line"
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
className="block h-4 w-4 rounded-full bg-accent"
|
|
data-testid="theme-toggle-swatch"
|
|
/>
|
|
</button>
|
|
);
|
|
}
|