used daisyUI for dark mode

components/CollectionCard.tsx

@@ -8,6 +8,7 @@ import ProfilePhoto from "./ProfilePhoto";
 import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
 import useModalStore from "@/store/modals";
 import usePermissions from "@/hooks/usePermissions";
+import useLocalSettingsStore from "@/store/localSettings";
 
 type Props = {
   collection: CollectionIncludingMembersAndLinkCount;
@@ -23,6 +24,7 @@ type DropdownTrigger =
 
 export default function CollectionCard({ collection, className }: Props) {
   const { setModal } = useModalStore();
+  const { settings } = useLocalSettingsStore();
 
   const formattedDate = new Date(collection.createdAt as string).toLocaleString(
     "en-US",
@@ -42,8 +44,8 @@ export default function CollectionCard({ collection, className }: Props) {
       <div
         style={{
           backgroundImage: `linear-gradient(45deg, ${collection.color}30 10%, ${
-            "dark" ? "#262626" : "#f3f4f6"
-          } 50%, ${"dark" ? "#262626" : "#f9fafb"} 100%)`,
+            settings.theme === "dark" ? "#262626" : "#f3f4f6"
+          } 50%, ${settings.theme === "dark" ? "#262626" : "#f9fafb"} 100%)`,
         }}
         className={`border border-solid border-sky-100 dark:border-neutral-700 self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${
           className || ""

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();
                   },
                 },
                 {

components/ToggleDarkMode.tsx

@@ -1,3 +1,4 @@
+import useLocalSettingsStore from "@/store/localSettings";
 import { useEffect, useState } from "react";
 
 type Props = {
@@ -5,9 +6,9 @@ type Props = {
 };
 
 export default function ToggleDarkMode({ className }: Props) {
-  const [theme, setTheme] = useState(
-    localStorage.getItem("theme") ? localStorage.getItem("theme") : "light"
-  );
+  const { updateSettings } = useLocalSettingsStore();
+
+  const [theme, setTheme] = useState(localStorage.getItem("theme"));
 
   const handleToggle = (e: any) => {
     if (e.target.checked) {
@@ -18,11 +19,7 @@ export default function ToggleDarkMode({ className }: Props) {
   };
 
   useEffect(() => {
-    localStorage.setItem("theme", theme || "");
-    const localTheme = localStorage.getItem("theme");
-    document
-      .querySelector("html")
-      ?.setAttribute("data-theme", localTheme || "");
+    updateSettings({ theme: theme as string });
   }, [theme]);
 
   return (
@@ -31,7 +28,7 @@ export default function ToggleDarkMode({ className }: Props) {
         type="checkbox"
         onChange={handleToggle}
         className="theme-controller"
-        checked={theme === "light" ? false : true}
+        checked={localStorage.getItem("theme") === "light" ? false : true}
       />
 
       {/* sun icon */}