used daisyUI for dark mode

pages/public/collections/[id].tsx

@@ -20,6 +20,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faFilter, faSort } from "@fortawesome/free-solid-svg-icons";
 import FilterSearchDropdown from "@/components/FilterSearchDropdown";
 import SortDropdown from "@/components/SortDropdown";
+import useLocalSettingsStore from "@/store/localSettings";
 
 const cardVariants: Variants = {
   offscreen: {
@@ -39,6 +40,8 @@ export default function PublicCollections() {
   const { links } = useLinkStore();
   const { modal, setModal } = useModalStore();
 
+  const { settings } = useLocalSettingsStore();
+
   useEffect(() => {
     modal
       ? (document.body.style.overflow = "hidden")
@@ -103,8 +106,8 @@ export default function PublicCollections() {
       className="h-screen"
       style={{
         backgroundImage: `linear-gradient(${collection?.color}30 10%, ${
-          "dark" ? "#262626" : "#f3f4f6"
-        } 50%, ${"dark" ? "#171717" : "#ffffff"} 100%)`,
+          settings.theme === "dark" ? "#262626" : "#f3f4f6"
+        } 50%, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
       }}
     >
       <ModalManagement />

pages/public/links/[id].tsx

@@ -16,6 +16,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBoxesStacked, faFolder } from "@fortawesome/free-solid-svg-icons";
 import useModalStore from "@/store/modals";
 import { useSession } from "next-auth/react";
+import useLocalSettingsStore from "@/store/localSettings";
 
 type LinkContent = {
   title: string;
@@ -33,6 +34,8 @@ export default function Index() {
   const { links, getLink } = useLinkStore();
   const { setModal } = useModalStore();
 
+  const { settings } = useLocalSettingsStore();
+
   const session = useSession();
   const userId = session.data?.user.id;
 
@@ -144,7 +147,7 @@ export default function Index() {
     <LinkLayout>
       <div
         className={`flex flex-col max-w-screen-md h-full ${
-          "dark" ? "banner-dark-mode" : "banner-light-mode"
+          settings.theme === "dark" ? "banner-dark-mode" : "banner-light-mode"
         }`}
       >
         <div