Add dark mode toggle

.setup/data/collections.ts

@@ -5,7 +5,7 @@ export default [
     $write: [],
     name: "Shares",
     enabled: true,
-    permission: "collection",
+    permission: "document",
     attributes: [
       {
         key: "securityID",

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

src/pages/_app.tsx

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