feat(ui): add theme toggle to dashboard layout

- Implement theme switching between light and dark modes
- Use Mantine's color scheme for automatic detection
- Add tooltip for theme toggle button
- Update App component to use 'auto' color scheme

web/src/components/DashboardLayout.tsx

@@ -9,6 +9,9 @@ import {
   Avatar,
   Stack,
   Image,
+  ActionIcon,
+  Tooltip,
+  useMantineColorScheme,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import {
@@ -24,11 +27,14 @@ import {
   IconFileText,
   IconDatabase,
   IconLogout,
+  IconSun,
+  IconMoon,
 } from "@tabler/icons-react";
 import { useAuthStore } from "../stores/authStore";
 
 export default function DashboardLayout() {
   const { user, logout } = useAuthStore();
+  const { colorScheme, setColorScheme } = useMantineColorScheme();
   const navigate = useNavigate();
   const location = useLocation();
   const [opened, { toggle }] = useDisclosure();
@@ -49,6 +55,17 @@ export default function DashboardLayout() {
   const displayInitial = displayName[0]?.toUpperCase() || "U";
   const logoSrc = `${import.meta.env.BASE_URL}logo.png`;
   const swaggerIconSrc = `${import.meta.env.BASE_URL}swagger-icon.svg`;
+  const isDark = colorScheme === "dark";
+
+  const toggleTheme = () => {
+    if (colorScheme === "auto") {
+      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      setColorScheme(prefersDark ? "light" : "dark");
+      return;
+    }
+
+    setColorScheme(isDark ? "light" : "dark");
+  };
 
   return (
     <AppShell
@@ -261,6 +278,16 @@ export default function DashboardLayout() {
         <AppShell.Section>
           <Stack gap="xs">
             <Group justify="space-between" px="sm">
+              <Tooltip label={isDark ? "Switch to light theme" : "Switch to dark theme"}>
+                <ActionIcon
+                  variant="light"
+                  size="lg"
+                  onClick={toggleTheme}
+                  aria-label={isDark ? "Switch to light theme" : "Switch to dark theme"}
+                >
+                  {isDark ? <IconSun size={18} /> : <IconMoon size={18} />}
+                </ActionIcon>
+              </Tooltip>
               <div>
                 <Text size="sm" fw={500}>
                   {displayName}