used daisyUI for dark mode

store/localSettings.ts

@@ -1,23 +1,45 @@
 import { create } from "zustand";
 
 type LocalSettings = {
-  darkMode: boolean;
+  theme: string;
 };
 
 type LocalSettingsStore = {
   settings: LocalSettings;
   updateSettings: (settings: LocalSettings) => void;
+  setSettings: () => void;
 };
 
 const useLocalSettingsStore = create<LocalSettingsStore>((set) => ({
   settings: {
-    darkMode: false,
+    theme: "",
   },
   updateSettings: async (newSettings) => {
+    if (
+      newSettings.theme &&
+      newSettings.theme !== localStorage.getItem("theme")
+    ) {
+      localStorage.setItem("theme", newSettings.theme);
+
+      const localTheme = localStorage.getItem("theme");
+
+      document
+        .querySelector("html")
+        ?.setAttribute("data-theme", localTheme || "");
+    }
+
     set((state) => ({ settings: { ...state.settings, ...newSettings } }));
   },
+  setSettings: async () => {
+    if (!localStorage.getItem("theme")) {
+      localStorage.setItem("theme", "dark");
+    }
+
+    const localTheme = localStorage.getItem("theme");
+    document
+      .querySelector("html")
+      ?.setAttribute("data-theme", localTheme || "");
+  },
 }));
 
 export default useLocalSettingsStore;
-
-// TODO: Add Dark mode.