Theme switch support (#3568)

### What problem does this PR solve?
- [x] New Feature (non-breaking change which adds functionality)

---------

Co-authored-by: Yingfeng <yingfeng.zhang@gmail.com>
Co-authored-by: Jin Hai <haijin.chn@gmail.com>

web/src/app.tsx

@@ -1,7 +1,7 @@
 import i18n from '@/locales/config';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { App, ConfigProvider, ConfigProviderProps } from 'antd';
+import { App, ConfigProvider, ConfigProviderProps, theme } from 'antd';
 import enUS from 'antd/locale/en_US';
 import vi_VN from 'antd/locale/vi_VN';
 import zhCN from 'antd/locale/zh_CN';
@@ -14,7 +14,7 @@ import weekOfYear from 'dayjs/plugin/weekOfYear';
 import weekYear from 'dayjs/plugin/weekYear';
 import weekday from 'dayjs/plugin/weekday';
 import React, { ReactNode, useEffect, useState } from 'react';
-import { ThemeProvider } from './components/theme-provider';
+import { ThemeProvider, useTheme } from './components/theme-provider';
 import storage from './utils/authorization-util';
 
 dayjs.extend(customParseFormat);
@@ -35,7 +35,8 @@ const queryClient = new QueryClient();
 
 type Locale = ConfigProviderProps['locale'];
 
-const RootProvider = ({ children }: React.PropsWithChildren) => {
+function Root({ children }: React.PropsWithChildren) {
+  const { theme: themeragflow } = useTheme();
   const getLocale = (lng: string) =>
     AntLanguageMap[lng as keyof typeof AntLanguageMap] ?? enUS;
 
@@ -46,6 +47,28 @@ const RootProvider = ({ children }: React.PropsWithChildren) => {
     setLocal(getLocale(lng));
   });
 
+  return (
+    <>
+      <ConfigProvider
+        theme={{
+          token: {
+            fontFamily: 'Inter',
+          },
+          algorithm:
+            themeragflow === 'dark'
+              ? theme.darkAlgorithm
+              : theme.defaultAlgorithm,
+        }}
+        locale={locale}
+      >
+        <App> {children}</App>
+      </ConfigProvider>
+      <ReactQueryDevtools buttonPosition={'top-left'} />
+    </>
+  );
+}
+
+const RootProvider = ({ children }: React.PropsWithChildren) => {
   useEffect(() => {
     // Because the language is saved in the backend, a token is required to obtain the api. However, the login page cannot obtain the language through the getUserInfo api, so the language needs to be saved in localstorage.
     const lng = storage.getLanguage();
@@ -57,22 +80,11 @@ const RootProvider = ({ children }: React.PropsWithChildren) => {
   return (
     <QueryClientProvider client={queryClient}>
       <ThemeProvider defaultTheme="light" storageKey="ragflow-ui-theme">
-        <ConfigProvider
-          theme={{
-            token: {
-              fontFamily: 'Inter',
-            },
-          }}
-          locale={locale}
-        >
-          <App> {children}</App>
-        </ConfigProvider>
-        <ReactQueryDevtools buttonPosition={'top-left'} />
+        <Root>{children}</Root>
       </ThemeProvider>
     </QueryClientProvider>
   );
 };
-
 export function rootContainer(container: ReactNode) {
   return <RootProvider>{container}</RootProvider>;
 }