Update dependencies and add dark mode support

src/hooks/useDarkmode.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { create } from "zustand";
+
+type DarkModeState = {
+  mode: "system" | "dark" | "light";
+  setMode: (mode: "system" | "dark" | "light") => void;
+};
+
+export const useDarkModeStore = create<DarkModeState>((set) => ({
+  mode: "system",
+  setMode: (mode) => set({ mode }),
+}));
+
+export const useDarkMode = () => {
+  const { mode, setMode } = useDarkModeStore();
+
+  const getSystemTheme = () => {
+    const darkModeMediaQuery = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    );
+    const isDarkMode = darkModeMediaQuery.matches;
+    return isDarkMode ? "dark" : "light";
+  };
+
+  const handleDarkModeChange = (e: MediaQueryListEvent) => {
+    document.documentElement.classList.remove("dark", "light");
+    const mode = e.matches ? "dark" : "light";
+    document.documentElement.classList.add(mode);
+    setMode(mode);
+  };
+
+  React.useEffect(() => {
+    const theme = localStorage.getItem("theme") as "system" | "dark" | "light";
+    if (theme) {
+      if (theme !== "system") {
+        document.documentElement.classList.add(theme);
+        setMode(theme);
+      } else {
+        const systemTheme = getSystemTheme();
+        document.documentElement.classList.add(systemTheme);
+        setMode(systemTheme);
+      }
+    } else {
+      setMode(getSystemTheme());
+      localStorage.setItem("theme", getSystemTheme());
+    }
+  }, []);
+
+  React.useEffect(() => {
+    const darkModeMediaQuery = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    );
+    darkModeMediaQuery.addEventListener("change", handleDarkModeChange);
+    return () =>
+      darkModeMediaQuery.removeEventListener("change", handleDarkModeChange);
+  }, []);
+
+  const toggleDarkMode = () => {
+    const newMode = mode === "dark" ? "light" : "dark";
+    document.documentElement.classList.remove("dark", "light");
+    document.documentElement.classList.add(newMode);
+    setMode(newMode);
+    localStorage.setItem("theme", newMode);
+  };
+
+  return { mode, toggleDarkMode };
+};

src/option.tsx

@@ -4,13 +4,24 @@ import { ToastContainer } from "react-toastify"
 import "react-toastify/dist/ReactToastify.css"
 const queryClient = new QueryClient()
 import "./css/tailwind.css"
-
+import { ConfigProvider, theme } from "antd"
+import { StyleProvider } from "@ant-design/cssinjs"
+import { useDarkMode } from "~hooks/useDarkmode"
 function IndexOption() {
+  const { mode } = useDarkMode()
   return (
     <MemoryRouter>
-      <QueryClientProvider client={queryClient}>
-        <ToastContainer />
-      </QueryClientProvider>
+      <ConfigProvider
+        theme={{
+          algorithm:
+            mode === "dark" ? theme.darkAlgorithm : theme.defaultAlgorithm
+        }}>
+        <StyleProvider hashPriority="high">
+          <QueryClientProvider client={queryClient}>
+            <ToastContainer />
+          </QueryClientProvider>
+        </StyleProvider>
+      </ConfigProvider>
     </MemoryRouter>
   )
 }

src/sidepanel.tsx

@@ -1,20 +1,32 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { MemoryRouter } from "react-router-dom"
-import {  SidepanelRouting } from "~routes"
+import { SidepanelRouting } from "~routes"
 import { ToastContainer } from "react-toastify"
 import "react-toastify/dist/ReactToastify.css"
 const queryClient = new QueryClient()
 import "./css/tailwind.css"
+import { ConfigProvider, theme } from "antd"
+import { StyleProvider } from "@ant-design/cssinjs"
+import { useDarkMode } from "~hooks/useDarkmode"
+function IndexSidepanel() {
+  const { mode } = useDarkMode()
 
-function IndexOption() {
   return (
     <MemoryRouter>
-      <QueryClientProvider client={queryClient}>
-        <SidepanelRouting />
-        <ToastContainer />
-      </QueryClientProvider>
+      <ConfigProvider
+        theme={{
+          algorithm:
+            mode === "dark" ? theme.darkAlgorithm : theme.defaultAlgorithm
+        }}>
+        <StyleProvider hashPriority="high">
+          <QueryClientProvider client={queryClient}>
+            <SidepanelRouting />
+            <ToastContainer />
+          </QueryClientProvider>
+        </StyleProvider>
+      </ConfigProvider>
     </MemoryRouter>
   )
 }
 
-export default IndexOption
+export default IndexSidepanel