feat: add theme toggle to navigation bar

apps/client/src/components/layouts/global/top-menu.tsx

@@ -14,6 +14,7 @@ import APP_ROUTE from "@/lib/app-route.ts";
 import useAuth from "@/features/auth/hooks/use-auth.ts";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { useTranslation } from "react-i18next";
+import { ThemeToggle } from '@/components/ui/theme-toggle';
 
 export default function TopMenu() {
   const { t } = useTranslation();
@@ -28,6 +29,8 @@ export default function TopMenu() {
   }
 
   return (
+    <>
+      <ThemeToggle />
       <Menu width={250} position="bottom-end" withArrow shadow={"lg"}>
         <Menu.Target>
           <UnstyledButton>
@@ -108,5 +111,6 @@ export default function TopMenu() {
           </Menu.Item>
         </Menu.Dropdown>
       </Menu>
+    </>
   );
 }

apps/client/src/components/ui/theme-toggle.tsx

@@ -0,0 +1,23 @@
+import { ActionIcon, useComputedColorScheme, useMantineColorScheme } from '@mantine/core';
+import { IconSun, IconMoon } from '@tabler/icons-react';
+
+export function ThemeToggle() {
+  const { setColorScheme } = useMantineColorScheme();
+  const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true });
+
+  return (
+    <ActionIcon
+      onClick={() => setColorScheme(computedColorScheme === 'light' ? 'dark' : 'light')}
+      variant="transparent"
+      size="md"
+      color="foreground"
+      aria-label="Toggle color scheme"
+    >
+      {computedColorScheme === 'light' ? (
+        <IconMoon size={18} stroke={1.5} />
+      ) : (
+        <IconSun size={18} stroke={1.5} />
+      )}
+    </ActionIcon>
+  );
+}