added dark mode toggle

.vite/deps/_metadata.json

@@ -0,0 +1,8 @@
+{
+  "hash": "910503ef",
+  "configHash": "c33e0ead",
+  "lockfileHash": "a58dca3f",
+  "browserHash": "e63ad675",
+  "optimized": {},
+  "chunks": {}
+}

.vite/deps/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

src/App.tsx

@@ -1,12 +1,22 @@
 import { MantineProvider } from "@mantine/core";
+import { useLocalStorage } from "@mantine/hooks";
 import { Notifications } from "@mantine/notifications";
 import { Router } from "./Router";
 
+export function useColorScheme() {
+  return useLocalStorage<'light' | 'dark'>({
+    key: 'rsvp-color-scheme',
+    defaultValue: 'light',
+  });
+}
+
 export default function App() {
+  const [colorScheme] = useColorScheme();
+
   return (
-    <MantineProvider>
+    <MantineProvider forceColorScheme={colorScheme}>
       <Notifications position="top-right" />
-        <Router />
+      <Router />
     </MantineProvider>
   );
-}
+}

src/components/Layout/Header.tsx

@@ -1,17 +1,18 @@
-import { 
-  Group, 
-  Burger, 
-  Title, 
-  Menu, 
-  Button, 
-  Avatar, 
-  Text, 
-  rem 
+import {
+  Group,
+  Burger,
+  Menu,
+  Button,
+  Avatar,
+  Text,
+  ActionIcon,
+  rem,
 } from "@mantine/core";
-import { IconChevronDown, IconLogout, IconUser } from "@tabler/icons-react";
+import { IconChevronDown, IconLogout, IconUser, IconSun, IconMoon } from "@tabler/icons-react";
 import { useAuth } from "../AuthContext";
 import { useNavigate } from "react-router-dom";
 import LogoBadge from "../Logo";
+import { useColorScheme } from "../../App";
 
 interface HeaderProps {
   opened: boolean;
@@ -21,10 +22,11 @@ interface HeaderProps {
 export function Header({ opened, toggle }: HeaderProps) {
   const { user, logout } = useAuth();
   const navigate = useNavigate();
+  const [colorScheme, setColorScheme] = useColorScheme();
 
-  const formattedName = user?.name 
-  ? user.name.split(',').map(part => part.trim()).reverse().join(' ') 
-  : '';
+  const formattedName = user?.name
+    ? user.name.split(',').map(part => part.trim()).reverse().join(' ')
+    : '';
 
   return (
     <Group h="100%" px="md" justify="space-between">
@@ -33,35 +35,47 @@ export function Header({ opened, toggle }: HeaderProps) {
         <LogoBadge size="1em" linkTo="/" showText={true} />
       </Group>
 
-      <Menu shadow="md" width={200}>
-        <Menu.Target>
-          <Button variant="subtle" rightSection={<IconChevronDown size={14} />}>
-            <Group gap={7}>
-              <Avatar src={null} alt={formattedName} radius="xl" size={20} color="blue" />
-              <Text fw={500} size="sm" lh={1} mr={3}>
-                {formattedName || "User"}
-              </Text>
-            </Group>
-          </Button>
-        </Menu.Target>
+      <Group gap="xs">
+        <ActionIcon
+          variant="subtle"
+          size="lg"
+          onClick={() => setColorScheme(s => s === 'dark' ? 'light' : 'dark')}
+          aria-label="Toggle color scheme"
+        >
+          {colorScheme === 'dark' ? <IconSun size={18} /> : <IconMoon size={18} />}
+        </ActionIcon>
 
-        <Menu.Dropdown>
-          <Menu.Label>My Account</Menu.Label>
-          <Menu.Item leftSection={<IconUser style={{ width: rem(14), height: rem(14) }} />}
-            onClick={() => navigate("/profile", { replace: true })}
-          >
-            Profile
-          </Menu.Item>
-          <Menu.Divider />
-          <Menu.Item 
-            color="red" 
-            leftSection={<IconLogout style={{ width: rem(14), height: rem(14) }} />}
-            onClick={() => logout()}
-          >
-            Logout
-          </Menu.Item>
-        </Menu.Dropdown>
-      </Menu>
+        <Menu shadow="md" width={200}>
+          <Menu.Target>
+            <Button variant="subtle" rightSection={<IconChevronDown size={14} />}>
+              <Group gap={7}>
+                <Avatar src={null} alt={formattedName} radius="xl" size={20} color="blue" />
+                <Text fw={500} size="sm" lh={1} mr={3}>
+                  {formattedName || "User"}
+                </Text>
+              </Group>
+            </Button>
+          </Menu.Target>
+
+          <Menu.Dropdown>
+            <Menu.Label>My Account</Menu.Label>
+            <Menu.Item
+              leftSection={<IconUser style={{ width: rem(14), height: rem(14) }} />}
+              onClick={() => navigate("/profile", { replace: true })}
+            >
+              Profile
+            </Menu.Item>
+            <Menu.Divider />
+            <Menu.Item
+              color="red"
+              leftSection={<IconLogout style={{ width: rem(14), height: rem(14) }} />}
+              onClick={() => logout()}
+            >
+              Logout
+            </Menu.Item>
+          </Menu.Dropdown>
+        </Menu>
+      </Group>
     </Group>
   );
-}
+}