2 files changed, 65 insertions, 41 deletions

diff --git a/src/contexts/DarkMode.tsx b/src/contexts/DarkMode.tsx
deleted file mode 100644
index fd536b2..0000000
--- a/src/contexts/DarkMode.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as React from "react";
-import {
-  Context,
-  createContext,
-  PropsWithChildren,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import { ThemeConfig } from "bootstrap-darkmode";
-
-interface DarkModeApi {
-  darkMode: boolean;
-  toggle: () => void;
-}
-
-export const DarkModeContext = createContext<Partial<DarkModeApi>>(
-  {}
-) as Context<DarkModeApi>;
-
-export default function DarkModeProvider({ children }: PropsWithChildren<any>) {
-  const themeConfig = useMemo(() => new ThemeConfig(), []);
-  const [darkMode, setDarkMode] = useState(
-    () => themeConfig.getTheme() === "dark"
-  );
-
-  useEffect(() => {
-    themeConfig.setTheme(darkMode ? "dark" : "light");
-  }, [darkMode]);
-
-  return (
-    <DarkModeContext.Provider
-      value={{
-        darkMode,
-        toggle: () => setDarkMode((dm) => !dm),
-      }}
-    >
-      {children}
-    </DarkModeContext.Provider>
-  );
-}
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>
+  );
+}