used daisyUI for dark mode

components/Navbar.tsx

@@ -12,10 +12,13 @@ import ProfilePhoto from "@/components/ProfilePhoto";
 import useModalStore from "@/store/modals";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
 import ToggleDarkMode from "./ToggleDarkMode";
+import useLocalSettingsStore from "@/store/localSettings";
 
 export default function Navbar() {
   const { setModal } = useModalStore();
 
+  const { settings, updateSettings } = useLocalSettingsStore();
+
   const { account } = useAccountStore();
 
   const [profileDropdown, setProfileDropdown] = useState(false);
@@ -26,6 +29,14 @@ export default function Navbar() {
 
   const { width } = useWindowDimensions();
 
+  const handleToggle = () => {
+    if (settings.theme === "dark") {
+      updateSettings({ theme: "light" });
+    } else {
+      updateSettings({ theme: "dark" });
+    }
+  };
+
   useEffect(() => {
     setSidebar(false);
   }, [width]);
@@ -95,9 +106,12 @@ export default function Navbar() {
                   href: "/settings/account",
                 },
                 {
-                  name: `Switch to ${"light" ? "Dark" : "Light"}`,
+                  name: `Switch to ${
+                    settings.theme === "light" ? "Dark" : "Light"
+                  }`,
                   onClick: () => {
                     setProfileDropdown(!profileDropdown);
+                    handleToggle();
                   },
                 },
                 {