Olivier CROGUENNEC
29 lines
797 B
React
29 lines
797 B
React
import { useTheme } from '../context/ThemeContext.jsx';
|
|
|
|
const OPTIONS = [
|
|
{ mode: 'light', icon: '☀', label: 'Clair' },
|
|
{ mode: 'dark', icon: '☾', label: 'Sombre' },
|
|
{ mode: 'system', icon: '◐', label: 'Système' },
|
|
];
|
|
|
|
export default function ThemeSwitcher() {
|
|
const { mode, setMode } = useTheme();
|
|
return (
|
|
<div className="theme-switcher" role="group" aria-label="Thème">
|
|
{OPTIONS.map(o => (
|
|
<button
|
|
key={o.mode}
|
|
type="button"
|
|
className={mode === o.mode ? 'active' : ''}
|
|
onClick={() => setMode(o.mode)}
|
|
title={o.label}
|
|
aria-pressed={mode === o.mode}
|
|
>
|
|
<span aria-hidden="true">{o.icon}</span>
|
|
<span>{o.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|