From 95c6578911bc52d4ecd1eefda313e45ab060fc1f Mon Sep 17 00:00:00 2001
From: huzibaca <masterorigin91@gmail.com>
Date: Tue, 29 Oct 2024 09:07:08 +0800
Subject: [PATCH] fix incorrect usage of useCustomTheme

---
 src/components/base/base-page.tsx         | 4 ++--
 src/components/layout/use-custom-theme.ts | 1 +
 src/pages/connections.tsx                 | 5 +++--
 src/pages/logs.tsx                        | 4 ++--
 src/pages/rules.tsx                       | 4 ++--
 5 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/base/base-page.tsx b/src/components/base/base-page.tsx
index 6e99dec1..b1f92e2c 100644
--- a/src/components/base/base-page.tsx
+++ b/src/components/base/base-page.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 import { Typography } from "@mui/material";
 import { BaseErrorBoundary } from "./base-error-boundary";
-import { useCustomTheme } from "@/components/layout/use-custom-theme";
+import { useTheme } from "@mui/material/styles";
 
 interface Props {
   title?: React.ReactNode; // the page title
@@ -13,7 +13,7 @@ interface Props {
 
 export const BasePage: React.FC<Props> = (props) => {
   const { title, header, contentStyle, full, children } = props;
-  const { theme } = useCustomTheme();
+  const theme = useTheme();
 
   const isDark = theme.palette.mode === "dark";
 
diff --git a/src/components/layout/use-custom-theme.ts b/src/components/layout/use-custom-theme.ts
index 4d2ca52b..adb313a1 100644
--- a/src/components/layout/use-custom-theme.ts
+++ b/src/components/layout/use-custom-theme.ts
@@ -4,6 +4,7 @@ import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
 import { useSetThemeMode, useThemeMode } from "@/services/states";
 import { defaultTheme, defaultDarkTheme } from "@/pages/_theme";
 import { useVerge } from "@/hooks/use-verge";
+import { useTheme } from "@mui/material/styles";
 const appWindow = getCurrentWebviewWindow();
 
 /**
diff --git a/src/pages/connections.tsx b/src/pages/connections.tsx
index 3f28a216..474fee69 100644
--- a/src/pages/connections.tsx
+++ b/src/pages/connections.tsx
@@ -15,11 +15,11 @@ import {
   ConnectionDetailRef,
 } from "@/components/connection/connection-detail";
 import parseTraffic from "@/utils/parse-traffic";
-import { useCustomTheme } from "@/components/layout/use-custom-theme";
 import { BaseSearchBox } from "@/components/base/base-search-box";
 import { BaseStyledSelect } from "@/components/base/base-styled-select";
 import useSWRSubscription from "swr/subscription";
 import { createSockette } from "@/utils/websocket";
+import { useTheme } from "@mui/material/styles";
 
 const initConn: IConnections = {
   uploadTotal: 0,
@@ -32,7 +32,8 @@ type OrderFunc = (list: IConnectionsItem[]) => IConnectionsItem[];
 const ConnectionsPage = () => {
   const { t } = useTranslation();
   const { clashInfo } = useClashInfo();
-  const { theme } = useCustomTheme();
+
+  const theme = useTheme();
   const isDark = theme.palette.mode === "dark";
   const [match, setMatch] = useState(() => (_: string) => true);
   const [curOrderOpt, setOrderOpt] = useState("Default");
diff --git a/src/pages/logs.tsx b/src/pages/logs.tsx
index 6fb6b956..6c59924c 100644
--- a/src/pages/logs.tsx
+++ b/src/pages/logs.tsx
@@ -10,7 +10,7 @@ import { useLogData } from "@/hooks/use-log-data";
 import { useEnableLog } from "@/services/states";
 import { BaseEmpty, BasePage } from "@/components/base";
 import LogItem from "@/components/log/log-item";
-import { useCustomTheme } from "@/components/layout/use-custom-theme";
+import { useTheme } from "@mui/material/styles";
 import { BaseSearchBox } from "@/components/base/base-search-box";
 import { BaseStyledSelect } from "@/components/base/base-styled-select";
 import { mutate } from "swr";
@@ -19,7 +19,7 @@ const LogPage = () => {
   const { t } = useTranslation();
   const { data: logData = [] } = useLogData();
   const [enableLog, setEnableLog] = useEnableLog();
-  const { theme } = useCustomTheme();
+  const theme = useTheme();
   const isDark = theme.palette.mode === "dark";
   const [logState, setLogState] = useState("all");
   const [match, setMatch] = useState(() => (_: string) => true);
diff --git a/src/pages/rules.tsx b/src/pages/rules.tsx
index 130901bc..eb4f26ba 100644
--- a/src/pages/rules.tsx
+++ b/src/pages/rules.tsx
@@ -7,13 +7,13 @@ import { getRules } from "@/services/api";
 import { BaseEmpty, BasePage } from "@/components/base";
 import RuleItem from "@/components/rule/rule-item";
 import { ProviderButton } from "@/components/rule/provider-button";
-import { useCustomTheme } from "@/components/layout/use-custom-theme";
 import { BaseSearchBox } from "@/components/base/base-search-box";
+import { useTheme } from "@mui/material/styles";
 
 const RulesPage = () => {
   const { t } = useTranslation();
   const { data = [] } = useSWR("getRules", getRules);
-  const { theme } = useCustomTheme();
+  const theme = useTheme();
   const isDark = theme.palette.mode === "dark";
   const [match, setMatch] = useState(() => (_: string) => true);