From 05c8e1a9e55bd6fd09c7aca5c58d881deccd5125 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Fri, 28 Nov 2025 10:57:43 +0000
Subject: [PATCH] Refactor:  `useSyncThemeFromParams` hook manages theme state
 based on URL parameters, replacing direct usage of `useTheme` and achieve
 code reuse.

---
 web/src/components/theme-provider.tsx    | 10 ++++++++++
 web/src/pages/agent/share/index.tsx      | 11 ++---------
 web/src/pages/next-chats/share/index.tsx | 11 ++---------
 3 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/web/src/components/theme-provider.tsx b/web/src/components/theme-provider.tsx
index 25898572a..286fb41ee 100644
--- a/web/src/components/theme-provider.tsx
+++ b/web/src/components/theme-provider.tsx
@@ -71,3 +71,13 @@ export function useSwitchToDarkThemeOnMount() {
     setTheme(ThemeEnum.Dark);
   }, [setTheme]);
 }
+
+export function useSyncThemeFromParams(theme: string | null) {
+  const { setTheme } = useTheme();
+
+  useEffect(() => {
+    if (theme && (theme === ThemeEnum.Light || theme === ThemeEnum.Dark)) {
+      setTheme(theme as ThemeEnum);
+    }
+  }, [theme, setTheme]);
+}
diff --git a/web/src/pages/agent/share/index.tsx b/web/src/pages/agent/share/index.tsx
index 08db6b96d..355e675ee 100644
--- a/web/src/pages/agent/share/index.tsx
+++ b/web/src/pages/agent/share/index.tsx
@@ -4,9 +4,8 @@ import { NextMessageInput } from '@/components/message-input/next';
 import MessageItem from '@/components/next-message-item';
 import PdfDrawer from '@/components/pdf-drawer';
 import { useClickDrawer } from '@/components/pdf-drawer/hooks';
-import { useTheme } from '@/components/theme-provider';
+import { useSyncThemeFromParams } from '@/components/theme-provider';
 import { MessageType } from '@/constants/chat';
-import { ThemeEnum } from '@/constants/common';
 import { useUploadCanvasFileWithProgress } from '@/hooks/use-agent-request';
 import { cn } from '@/lib/utils';
 import i18n from '@/locales/config';
@@ -30,7 +29,7 @@ const ChatContainer = () => {
     theme,
     visibleAvatar,
   } = useGetSharedChatSearchParams();
-  const { setTheme } = useTheme();
+  useSyncThemeFromParams(theme);
   const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
     useClickDrawer();
 
@@ -93,12 +92,6 @@ const ChatContainer = () => {
     }
   }, [locale, visibleAvatar]);
 
-  React.useEffect(() => {
-    if (theme && (theme === ThemeEnum.Light || theme === ThemeEnum.Dark)) {
-      setTheme(theme as ThemeEnum);
-    }
-  }, [theme, setTheme]);
-
   React.useEffect(() => {
     if (!isTaskMode && inputsData.prologue) {
       addNewestOneAnswer({
diff --git a/web/src/pages/next-chats/share/index.tsx b/web/src/pages/next-chats/share/index.tsx
index 59885cf40..8ff4eba69 100644
--- a/web/src/pages/next-chats/share/index.tsx
+++ b/web/src/pages/next-chats/share/index.tsx
@@ -3,9 +3,8 @@ import { NextMessageInput } from '@/components/message-input/next';
 import MessageItem from '@/components/message-item';
 import PdfDrawer from '@/components/pdf-drawer';
 import { useClickDrawer } from '@/components/pdf-drawer/hooks';
-import { useTheme } from '@/components/theme-provider';
+import { useSyncThemeFromParams } from '@/components/theme-provider';
 import { MessageType, SharedFrom } from '@/constants/chat';
-import { ThemeEnum } from '@/constants/common';
 import { useFetchNextConversationSSE } from '@/hooks/chat-hooks';
 import { useFetchFlowSSE } from '@/hooks/flow-hooks';
 import { useFetchExternalChatInfo } from '@/hooks/use-chat-request';
@@ -27,7 +26,7 @@ const ChatContainer = () => {
     theme,
     visibleAvatar,
   } = useGetSharedChatSearchParams();
-  const { setTheme } = useTheme();
+  useSyncThemeFromParams(theme);
   const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
     useClickDrawer();
 
@@ -57,12 +56,6 @@ const ChatContainer = () => {
     }
   }, [locale, visibleAvatar]);
 
-  React.useEffect(() => {
-    if (theme && (theme === ThemeEnum.Light || theme === ThemeEnum.Dark)) {
-      setTheme(theme as ThemeEnum);
-    }
-  }, [theme, setTheme]);
-
   const { data: avatarData } = useFetchAvatar();
 
   if (!conversationId) {