restore color for light mode

isthaison · Nov 29, 2024 · 84ccf4e · 84ccf4e
1 parent faa0fda
commit 84ccf4e
Show file tree

Hide file tree

Showing 20 changed files with 221 additions and 55 deletions.
diff --git a/web/src/layouts/components/header/index.less b/web/src/layouts/components/header/index.less
@@ -35,7 +35,47 @@
     height: 40px;
     line-height: 40px;
     border: 0 !important;
-    background-color: rgba(249, 249, 249, 0.3);
+    background-color: rgba(249, 249, 249, 1);
+    font-weight: @fontWeight700;
+    color: rgba(29, 25, 41, 1);
+    &::before {
+      display: none !important;
+    }
+  }
+  :global(.ant-radio-button-wrapper-checked) {
+    border-radius: 6px !important;
+    & a {
+      color: white;
+    }
+  }
+  :global(.ant-radio-button-wrapper-checked.dark) {
+    border-radius: 0px !important;
+    & a {
+      color: white;
+    }
+  }
+  :global(.ant-radio-button-wrapper-checked.dark.first) {
+    border-top-left-radius: 6px !important;
+    border-bottom-left-radius: 6px !important;
+    & a {
+      color: white;
+    }
+  }
+  :global(.ant-radio-button-wrapper-checked.dark.last) {
+    border-top-right-radius: 6px !important;
+    border-bottom-right-radius: 6px !important;
+    & a {
+      color: white;
+    }
+  }
+}
+
+.radioGroupDark {
+  & label {
+    height: 40px;
+    line-height: 40px;
+    border: 0 !important;
+    background-color: rgba(249, 249, 249, 0.25);
     font-weight: @fontWeight700;
     color: rgba(29, 25, 41, 1);
     &::before {

diff --git a/web/src/layouts/components/header/index.tsx b/web/src/layouts/components/header/index.tsx
@@ -79,7 +79,9 @@ const RagHeader = () => {
         <Radio.Group
           defaultValue="a"
           buttonStyle="solid"
-          className={styles.radioGroup}
+          className={
+            themeRag === 'dark' ? styles.radioGroupDark : styles.radioGroup
+          }
           value={currentPath}
         >
           {tagsData.map((item, index) => (

diff --git a/web/src/pages/chat/index.less b/web/src/pages/chat/index.less
@@ -22,6 +22,12 @@
       }
     }
     .chatAppCardSelected {
+      :global(.ant-card-body) {
+        background-color: @gray11;
+        border-radius: 8px;
+      }
+    }
+    .chatAppCardSelectedDark {
       :global(.ant-card-body) {
         background-color: rgba(255, 255, 255, 0.1);
         border-radius: 8px;
@@ -57,6 +63,12 @@
   }
 
   .chatTitleCardSelected {
+    :global(.ant-card-body) {
+      background-color: @gray11;
+      border-radius: 8px;
+    }
+  }
+  .chatTitleCardSelectedDark {
     :global(.ant-card-body) {
       background-color: rgba(255, 255, 255, 0.1);
       border-radius: 8px;

diff --git a/web/src/pages/chat/index.tsx b/web/src/pages/chat/index.tsx
@@ -30,6 +30,7 @@ import {
 } from './hooks';
 
 import SvgIcon from '@/components/svg-icon';
+import { useTheme } from '@/components/theme-provider';
 import {
   useClickConversationCard,
   useClickDialogCard,
@@ -51,6 +52,7 @@ const Chat = () => {
   const { handleClickDialog } = useClickDialogCard();
   const { handleClickConversation } = useClickConversationCard();
   const { dialogId, conversationId } = useGetChatSearchParams();
+  const { theme } = useTheme();
   const {
     list: conversationList,
     addTemporaryConversation,
@@ -243,7 +245,9 @@ const Chat = () => {
                   key={x.id}
                   hoverable
                   className={classNames(styles.chatAppCard, {
-                    [styles.chatAppCardSelected]: dialogId === x.id,
+                    [theme === 'dark'
+                      ? styles.chatAppCardSelectedDark
+                      : styles.chatAppCardSelected]: dialogId === x.id,
                   })}
                   onMouseEnter={handleAppCardEnter(x.id)}
                   onMouseLeave={handleItemLeave}
@@ -316,7 +320,9 @@ const Chat = () => {
                   onMouseEnter={handleConversationCardEnter(x.id)}
                   onMouseLeave={handleConversationItemLeave}
                   className={classNames(styles.chatTitleCard, {
-                    [styles.chatTitleCardSelected]: x.id === conversationId,
+                    [theme === 'dark'
+                      ? styles.chatTitleCardSelectedDark
+                      : styles.chatTitleCardSelected]: x.id === conversationId,
                   })}
                 >
                   <Flex justify="space-between" align="center">

diff --git a/web/src/pages/flow/canvas/node/begin-node.tsx b/web/src/pages/flow/canvas/node/begin-node.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@/components/theme-provider';
 import { Flex } from 'antd';
 import classNames from 'classnames';
 import get from 'lodash/get';
@@ -18,12 +19,16 @@ import styles from './index.less';
 export function BeginNode({ selected, data }: NodeProps<NodeData>) {
   const { t } = useTranslation();
   const query: BeginQuery[] = get(data, 'form.query', []);
-
+  const { theme } = useTheme();
   return (
     <section
-      className={classNames(styles.ragNode, {
-        [styles.selectedNode]: selected,
-      })}
+      className={classNames(
+        styles.ragNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
     >
       <Handle
         type="source"

diff --git a/web/src/pages/flow/canvas/node/categorize-node.tsx b/web/src/pages/flow/canvas/node/categorize-node.tsx
@@ -1,4 +1,5 @@
 import LLMLabel from '@/components/llm-select/llm-label';
+import { useTheme } from '@/components/theme-provider';
 import { Flex } from 'antd';
 import classNames from 'classnames';
 import { get } from 'lodash';
@@ -11,12 +12,16 @@ import NodeHeader from './node-header';
 
 export function CategorizeNode({ id, data, selected }: NodeProps<NodeData>) {
   const { positions } = useBuildCategorizeHandlePositions({ data, id });
-
+  const { theme } = useTheme();
   return (
     <section
-      className={classNames(styles.logicNode, {
-        [styles.selectedNode]: selected,
-      })}
+      className={classNames(
+        styles.logicNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
     >
       <Handle
         type="target"

diff --git a/web/src/pages/flow/canvas/node/generate-node.tsx b/web/src/pages/flow/canvas/node/generate-node.tsx
@@ -1,4 +1,5 @@
 import LLMLabel from '@/components/llm-select/llm-label';
+import { useTheme } from '@/components/theme-provider';
 import { Flex } from 'antd';
 import classNames from 'classnames';
 import { get } from 'lodash';
@@ -17,12 +18,16 @@ export function GenerateNode({
 }: NodeProps<NodeData>) {
   const parameters: IGenerateParameter[] = get(data, 'form.parameters', []);
   const getLabel = useGetComponentLabelByValue(id);
-
+  const { theme } = useTheme();
   return (
     <section
-      className={classNames(styles.logicNode, {
-        [styles.selectedNode]: selected,
-      })}
+      className={classNames(
+        styles.logicNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
     >
       <Handle
         id="c"

diff --git a/web/src/pages/flow/canvas/node/index.less b/web/src/pages/flow/canvas/node/index.less
@@ -6,13 +6,15 @@
 
   padding: 10px;
   border-radius: 10px;
-  background: rgba(255, 255, 255, 0.1);
+  background: white;
   width: 200px;
 }
 
+.dark {
+  background: rgb(63, 63, 63) !important;
+}
 .ragNode {
   .commonNode();
-
   .nodeName {
     font-size: 10px;
     color: black;
@@ -99,6 +101,13 @@
   border-radius: 10px;
   min-height: 128px;
   .noteTitle {
+    background-color: #edfcff;
+    font-size: 12px;
+    padding: 6px 6px 4px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
+  .noteTitleDark {
     background-color: #edfcff50;
     font-size: 12px;
     padding: 6px 6px 4px;

diff --git a/web/src/pages/flow/canvas/node/index.tsx b/web/src/pages/flow/canvas/node/index.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@/components/theme-provider';
 import classNames from 'classnames';
 import { Handle, NodeProps, Position } from 'reactflow';
 import { NodeData } from '../../interface';
@@ -11,11 +12,16 @@ export function RagNode({
   isConnectable = true,
   selected,
 }: NodeProps<NodeData>) {
+  const { theme } = useTheme();
   return (
     <section
-      className={classNames(styles.ragNode, {
-        [styles.selectedNode]: selected,
-      })}
+      className={classNames(
+        styles.ragNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
     >
       <Handle
         id="c"

diff --git a/web/src/pages/flow/canvas/node/invoke-node.tsx b/web/src/pages/flow/canvas/node/invoke-node.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@/components/theme-provider';
 import { Flex } from 'antd';
 import classNames from 'classnames';
 import { get } from 'lodash';
@@ -15,12 +16,17 @@ export function InvokeNode({
   selected,
 }: NodeProps<NodeData>) {
   const { t } = useTranslation();
+  const { theme } = useTheme();
   const url = get(data, 'form.url');
   return (
     <section
-      className={classNames(styles.ragNode, {
-        [styles.selectedNode]: selected,
-      })}
+      className={classNames(
+        styles.ragNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
     >
       <Handle
         id="c"

diff --git a/web/src/pages/flow/canvas/node/keyword-node.tsx b/web/src/pages/flow/canvas/node/keyword-node.tsx
@@ -1,4 +1,5 @@
 import LLMLabel from '@/components/llm-select/llm-label';
+import { useTheme } from '@/components/theme-provider';
 import classNames from 'classnames';
 import { get } from 'lodash';
 import { Handle, NodeProps, Position } from 'reactflow';
@@ -13,11 +14,16 @@ export function KeywordNode({
   isConnectable = true,
   selected,
 }: NodeProps<NodeData>) {
+  const { theme } = useTheme();
   return (
     <section
-      className={classNames(styles.logicNode, {
-        [styles.selectedNode]: selected,
-      })}
+      className={classNames(
+        styles.logicNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
     >
       <Handle
         id="c"

diff --git a/web/src/pages/flow/canvas/node/logic-node.tsx b/web/src/pages/flow/canvas/node/logic-node.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@/components/theme-provider';
 import classNames from 'classnames';
 import { Handle, NodeProps, Position } from 'reactflow';
 import { NodeData } from '../../interface';
@@ -11,11 +12,16 @@ export function LogicNode({
   isConnectable = true,
   selected,
 }: NodeProps<NodeData>) {
+  const { theme } = useTheme();
   return (
     <section
-      className={classNames(styles.logicNode, {
-        [styles.selectedNode]: selected,
-      })}
+      className={classNames(
+        styles.logicNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
     >
       <Handle
         id="c"

diff --git a/web/src/pages/flow/canvas/node/message-node.tsx b/web/src/pages/flow/canvas/node/message-node.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@/components/theme-provider';
 import { Flex } from 'antd';
 import classNames from 'classnames';
 import { get } from 'lodash';
@@ -14,12 +15,16 @@ export function MessageNode({
   selected,
 }: NodeProps<NodeData>) {
   const messages: string[] = get(data, 'form.messages', []);
-
+  const { theme } = useTheme();
   return (
     <section
-      className={classNames(styles.logicNode, {
-        [styles.selectedNode]: selected,
-      })}
+      className={classNames(
+        styles.logicNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
     >
       <Handle
         id="c"

diff --git a/web/src/pages/flow/canvas/node/note-node.tsx b/web/src/pages/flow/canvas/node/note-node.tsx
@@ -5,6 +5,7 @@ import { NodeData } from '../../interface';
 import NodeDropdown from './dropdown';
 
 import SvgIcon from '@/components/svg-icon';
+import { useTheme } from '@/components/theme-provider';
 import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -23,6 +24,7 @@ const controlStyle = {
 function NoteNode({ data, id }: NodeProps<NodeData>) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
+  const { theme } = useTheme();
 
   const { name, handleNameBlur, handleNameChange } = useHandleNodeNameChange({
     id,
@@ -51,7 +53,10 @@ function NoteNode({ data, id }: NodeProps<NodeData>) {
       <section className={styles.noteNode}>
         <Flex
           justify={'space-between'}
-          className={classNames(styles.noteTitle, 'note-drag-handle')}
+          className={classNames(
+            theme === 'dark' ? styles.noteTitleDark : styles.noteTitle,
+            'note-drag-handle',
+          )}
           align="center"
           gap={6}
         >