used daisyUI for dark mode

pages/_app.tsx

@@ -6,6 +6,7 @@ import Head from "next/head";
 import AuthRedirect from "@/layouts/AuthRedirect";
 import { Toaster } from "react-hot-toast";
 import { Session } from "next-auth";
+import useLocalSettingsStore from "@/store/localSettings";
 
 export default function App({
   Component,
@@ -13,20 +14,10 @@ export default function App({
 }: AppProps<{
   session: Session;
 }>) {
-  const [theme, setTheme] = useState("");
+  const { setSettings } = useLocalSettingsStore();
 
   useEffect(() => {
-    setTheme(
-      localStorage.getItem("theme")
-        ? (localStorage.getItem("theme") as string)
-        : "light"
-    );
-
-    if (theme) localStorage.setItem("theme", theme as string);
-    const localTheme = localStorage.getItem("theme");
-    document
-      .querySelector("html")
-      ?.setAttribute("data-theme", localTheme || "");
+    setSettings();
   }, []);
 
   return (

pages/collections/[id].tsx

@@ -18,10 +18,13 @@ import useModalStore from "@/store/modals";
 import useLinks from "@/hooks/useLinks";
 import usePermissions from "@/hooks/usePermissions";
 import NoLinksFound from "@/components/NoLinksFound";
+import useLocalSettingsStore from "@/store/localSettings";
 
 export default function Index() {
   const { setModal } = useModalStore();
 
+  const { settings } = useLocalSettingsStore();
+
   const router = useRouter();
 
   const { links } = useLinkStore();
@@ -51,9 +54,9 @@ export default function Index() {
           style={{
             backgroundImage: `linear-gradient(-45deg, ${
               activeCollection?.color
-            }30 10%, ${"dark" ? "#262626" : "#f3f4f6"} 50%, ${
-              "dark" ? "#262626" : "#f9fafb"
-            } 100%)`,
+            }30 10%, ${
+              settings.theme === "dark" ? "#262626" : "#f3f4f6"
+            } 50%, ${settings.theme === "dark" ? "#262626" : "#f9fafb"} 100%)`,
           }}
           className="border border-solid border-sky-100 dark:border-neutral-700 rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between"
         >

pages/dashboard.tsx

@@ -106,8 +106,6 @@ export default function Dashboard() {
 
   return (
     <MainLayout>
-      <button className="btn btn-primary">Primary</button>
-      <button className=" dark:bg-red-500">Primary</button>
       <div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
         <div className="flex items-center gap-3">
           <FontAwesomeIcon

pages/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

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

pages/settings/appearance.tsx

@@ -13,8 +13,10 @@ import SubmitButton from "@/components/SubmitButton";
 import React from "react";
 import Checkbox from "@/components/Checkbox";
 import LinkPreview from "@/components/LinkPreview";
+import useLocalSettingsStore from "@/store/localSettings";
 
 export default function Appearance() {
+  const { settings, updateSettings } = useLocalSettingsStore();
   const submit = async () => {
     setSubmitLoader(true);
 
@@ -75,8 +77,11 @@ export default function Appearance() {
           <div className="flex gap-3 w-full">
             <div
               className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
-                "dark" ? "dark:outline-sky-500 text-sky-500" : "text-white"
+                localStorage.getItem("theme") === "dark"
+                  ? "dark:outline-sky-500 text-sky-500"
+                  : "text-white"
               }`}
+              onClick={() => updateSettings({ theme: "dark" })}
             >
               <FontAwesomeIcon icon={faMoon} className="w-1/2 h-1/2" />
               <p className="text-2xl">Dark Theme</p>
@@ -85,8 +90,11 @@ export default function Appearance() {
             </div>
             <div
               className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
-                "light" ? "outline-sky-500 text-sky-500" : "text-black"
+                localStorage.getItem("theme") === "light"
+                  ? "outline-sky-500 text-sky-500"
+                  : "text-black"
               }`}
+              onClick={() => updateSettings({ theme: "light" })}
             >
               <FontAwesomeIcon icon={faSun} className="w-1/2 h-1/2" />
               <p className="text-2xl">Light Theme</p>