Updated the libraries

1 files changed, 65 insertions, 0 deletions

diff --git a/src/contexts/Settings.tsx b/src/contexts/Settings.tsx
new file mode 100644
index 0000000..2bbebcc
--- /dev/null
+++ b/src/contexts/Settings.tsx
@@ -0,0 +1,65 @@
+import * as React from "react";
+import {
+  Context,
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+import { Settings } from "~/types";
+
+interface SettingsApi {
+  darkMode: boolean;
+  setSetting: (key: keyof Settings, value: any) => void;
+}
+
+export const SettingsContext = createContext<Partial<SettingsApi>>(
+  {}
+) as Context<SettingsApi>;
+
+export default function SettingsProvider({ children }: PropsWithChildren<any>) {
+  // const themeConfig = useMemo(() => new ThemeConfig(), []);
+  const [settings, setSettings] = useState<Settings>(() => {
+    const stored = localStorage.getItem("settings");
+
+    if (stored) {
+      return JSON.parse(stored);
+    }
+
+    return {
+      darkMode:
+        window.matchMedia &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches,
+    };
+  });
+
+  const setSetting = useCallback(
+    (key: keyof Settings, value: any) => {
+      const newSetting = {
+        ...settings,
+        [key]: value,
+      };
+      setSettings(newSetting);
+      localStorage.setItem("settings", JSON.stringify(newSetting));
+    },
+    [settings]
+  );
+
+  useEffect(() => {
+    document
+      .querySelector("html")
+      ?.setAttribute("data-bs-theme", settings.darkMode ? "dark" : "light");
+  }, [settings.darkMode]);
+
+  return (
+    <SettingsContext.Provider
+      value={{
+        darkMode: settings.darkMode,
+        setSetting,
+      }}
+    >
+      {children}
+    </SettingsContext.Provider>
+  );
+}