chore: heygermany customer project

apps/website/components/ui/ThemeToggle.tsx

@@ -0,0 +1,25 @@
+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>
+  );
+}