Theme switch support

isthaison · Nov 21, 2024 · 49933b4 · 49933b4
1 parent f9df213
commit 49933b4
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 25 deletions.
diff --git a/web/src/app.tsx b/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,29 @@ const RootProvider = ({ children }: React.PropsWithChildren) => {
     setLocal(getLocale(lng));
   });
 
+  return (
+    <>
+      <ConfigProvider
+        theme={{
+          cssVar: true,
+          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 +81,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>;
 }
diff --git a/web/src/layouts/components/header/index.less b/web/src/layouts/components/header/index.less
@@ -35,7 +35,7 @@
     height: 40px;
     line-height: 40px;
     border: 0 !important;
-    background-color: rgba(249, 249, 249, 1);
+    background-color: rgba(249, 249, 249, 0.3);
     font-weight: @fontWeight700;
     color: rgba(29, 25, 41, 1);
     &::before {
@@ -55,6 +55,6 @@
 }
 .radioButtonIcon {
   vertical-align: middle;
-  max-width: 16px;
-  max-height: 16px;
+  max-width: 15px;
+  max-height: 15px;
 }
diff --git a/web/src/layouts/components/right-toolbar/index.less b/web/src/layouts/components/right-toolbar/index.less
@@ -11,9 +11,13 @@
   text-align: center;
   height: 32px;
   border-radius: 50%;
-  background-color: rgba(242, 243, 245, 1);
+  background-color: rgba(242, 243, 245, 0.4);
   vertical-align: middle;
   cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 .language {

diff --git a/web/src/layouts/components/right-toolbar/index.tsx b/web/src/layouts/components/right-toolbar/index.tsx
@@ -5,9 +5,11 @@ import camelCase from 'lodash/camelCase';
 import React from 'react';
 import User from '../user';
 
+import { useTheme } from '@/components/theme-provider';
 import { LanguageList, LanguageMap } from '@/constants/common';
 import { useChangeLanguage } from '@/hooks/logic-hooks';
 import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
+import { MoonIcon, SunIcon } from 'lucide-react';
 import styled from './index.less';
 
 const Circle = ({ children, ...restProps }: React.PropsWithChildren) => {
@@ -25,6 +27,8 @@ const handleGithubCLick = () => {
 const RightToolBar = () => {
   const { t } = useTranslate('common');
   const changeLanguage = useChangeLanguage();
+  const { setTheme, theme } = useTheme();
+
   const {
     data: { language = 'English' },
   } = useFetchUserInfo();
@@ -40,6 +44,13 @@ const RightToolBar = () => {
     return [...pre!, { type: 'divider' }, cur];
   }, []);
 
+  const onMoonClick = React.useCallback(() => {
+    setTheme('light');
+  }, [setTheme]);
+  const onSunClick = React.useCallback(() => {
+    setTheme('dark');
+  }, [setTheme]);
+
   return (
     <div className={styled.toolbarWrapper}>
       <Space wrap size={16}>
@@ -52,9 +63,13 @@ const RightToolBar = () => {
         <Circle>
           <GithubOutlined onClick={handleGithubCLick} />
         </Circle>
-        {/* <Circle>
-          <MonIcon />
-        </Circle> */}
+        <Circle>
+          {theme === 'dark' ? (
+            <MoonIcon onClick={onMoonClick} size={20} />
+          ) : (
+            <SunIcon onClick={onSunClick} size={20} />
+          )}
+        </Circle>
         <User></User>
       </Space>
     </div>

diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts
@@ -300,6 +300,7 @@ The above is the content you need to summarize.`,
       randomSeed: 'Random seed',
       randomSeedMessage: 'Random seed is required',
       entityTypes: 'Entity types',
+      vietnamese: 'Vietamese',
     },
     chunk: {
       chunk: 'Chunk',

diff --git a/web/src/locales/vi.ts b/web/src/locales/vi.ts
@@ -297,6 +297,7 @@ export default {
       randomSeed: 'Hạt giống ngẫu nhiên',
       randomSeedMessage: 'Hạt giống ngẫu nhiên là bắt buộc',
       entityTypes: 'Loại thực thể',
+      vietnamese: 'Tiếng Việt',
     },
     chunk: {
       chunk: 'Khối',

diff --git a/web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx b/web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx
@@ -69,6 +69,7 @@ const ConfigurationForm = ({ form }: { form: FormInstance }) => {
         <Select placeholder={t('languagePlaceholder')}>
           <Option value="English">{t('english')}</Option>
           <Option value="Chinese">{t('chinese')}</Option>
+          <Option value="Vietnamese">{t('vietnamese')}</Option>
         </Select>
       </Form.Item>
       <Form.Item

diff --git a/web/src/pages/knowledge/knowledge-card/index.less b/web/src/pages/knowledge/knowledge-card/index.less
@@ -27,7 +27,7 @@
 
 .card {
   border-radius: 12px;
-  border: 1px solid rgba(234, 236, 240, 1);
+  border: 1px solid rgba(234, 236, 240, 0.3);
   box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   padding: 24px;
   width: 300px;
@@ -39,14 +39,14 @@
       font-size: 24px;
       line-height: 32px;
       font-weight: 600;
-      color: rgba(0, 0, 0, 0.88);
+      color: var(--tw-ring-offset-color);
       word-break: break-all;
     }
     .description {
       font-size: 12px;
       font-weight: 600;
       line-height: 20px;
-      color: rgba(0, 0, 0, 0.45);
+      color: var(--tw-ring-offset-color);
     }
   }