26 lines
926 B
TypeScript
26 lines
926 B
TypeScript
import { IconMoon, IconSun } from '@tabler/icons-react';
|
|
import cx from 'clsx';
|
|
import { ActionIcon, Group, useComputedColorScheme, useMantineColorScheme } from '@pikku/mantine/core';
|
|
import { useI18n } from '@/context/i18n-provider';
|
|
import classes from './ThemeToggle.module.css';
|
|
|
|
export function ThemeToggle() {
|
|
const t = useI18n();
|
|
const { setColorScheme } = useMantineColorScheme();
|
|
const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true });
|
|
|
|
return (
|
|
<Group justify="center">
|
|
<ActionIcon
|
|
onClick={() => setColorScheme(computedColorScheme === 'light' ? 'dark' : 'light')}
|
|
variant="default"
|
|
size="lg"
|
|
aria-label={t('theme.toggle')}
|
|
>
|
|
<IconSun className={cx(classes.icon, classes.light)} stroke={1.5} />
|
|
<IconMoon className={cx(classes.icon, classes.dark)} stroke={1.5} />
|
|
</ActionIcon>
|
|
</Group>
|
|
);
|
|
}
|