Add dark mode toggle

src/components/navBar/ActionAvatar.tsx

@@ -1,7 +1,8 @@
-import { ActionIcon, Avatar, Menu } from "@mantine/core";
+import { ActionIcon, Avatar, Menu, Switch } from "@mantine/core";
 import { NextLink } from "@mantine/next";
-import { DoorExit, Link } from "tabler-icons-react";
+import { DoorExit, Link, Moon } from "tabler-icons-react";
 import aw from "../../utils/appwrite.util";
+import ToggleThemeButton from "./ToggleThemeButton";
 
 const ActionAvatar = () => {
   return (
@@ -36,6 +37,10 @@ const ActionAvatar = () => {
       >
         Sign out
       </Menu.Item>
+      <Menu.Label>Settings</Menu.Label>
+      <Menu.Item icon={<Moon size={14} />}>
+        <ToggleThemeButton />
+      </Menu.Item>
     </Menu>
   );
 };

src/components/navBar/ToggleThemeButton.tsx

@@ -1,25 +1,18 @@
-import { ActionIcon, useMantineColorScheme } from "@mantine/core";
-import { Sun, MoonStars } from "tabler-icons-react";
+import { Switch, useMantineColorScheme } from "@mantine/core";
 
 const ToggleThemeButton = () => {
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 
   return (
-    <ActionIcon
-      onClick={() => toggleColorScheme()}
-      sx={(theme) => ({
-        backgroundColor:
-          theme.colorScheme === "dark"
-            ? theme.colors.dark[6]
-            : theme.colors.gray[0],
-        color:
-          theme.colorScheme === "dark"
-            ? theme.colors.yellow[4]
-            : theme.colors.violet,
-      })}
-    >
-      {colorScheme === "dark" ? <Sun size={18} /> : <MoonStars size={18} />}
-    </ActionIcon>
+    <Switch
+      size="sm"
+      checked={colorScheme == "dark"}
+      onClick={(v) =>
+        toggleColorScheme(v.currentTarget.checked ? "dark" : "light")
+      }
+      onLabel="ON"
+      offLabel="OFF"
+    />
   );
 };
 

src/pages/_app.tsx

@@ -1,7 +1,6 @@
 import {
   ColorScheme,
   Container,
-  Group,
   LoadingOverlay,
   MantineProvider,
   Stack,