From b5e4a5563c578a4a4bf6d4f202888140b503f03e Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Tue, 17 Dec 2024 11:23:00 +0800
Subject: [PATCH] Feat: Set the color of the canvas's control button #3851
 (#4053)

### What problem does this PR solve?

Feat: Set the color of the canvas's control button #3851

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/components/theme-provider.tsx | 6 ++++++
 web/src/pages/flow/canvas/index.tsx   | 6 ++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/web/src/components/theme-provider.tsx b/web/src/components/theme-provider.tsx
index 5c9aa1b91..f6f214cc9 100644
--- a/web/src/components/theme-provider.tsx
+++ b/web/src/components/theme-provider.tsx
@@ -58,3 +58,9 @@ export const useTheme = () => {
 
   return context;
 };
+
+export const useIsDarkTheme = () => {
+  const { theme } = useTheme();
+
+  return theme === 'dark';
+};
diff --git a/web/src/pages/flow/canvas/index.tsx b/web/src/pages/flow/canvas/index.tsx
index 71ef7e42d..4c23a7835 100644
--- a/web/src/pages/flow/canvas/index.tsx
+++ b/web/src/pages/flow/canvas/index.tsx
@@ -103,6 +103,8 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
     hideSingleDebugDrawer,
   } = useShowSingleDebugDrawer();
 
+  const controlIconClassname = 'text-black';
+
   const { formDrawerVisible, hideFormDrawer, showFormDrawer, clickedNode } =
     useShowFormDrawer();
 
@@ -229,7 +231,7 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <FolderInput />
+                  <FolderInput className={controlIconClassname} />
                 </TooltipTrigger>
                 <TooltipContent>Import</TooltipContent>
               </Tooltip>
@@ -239,7 +241,7 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <FolderOutput />
+                  <FolderOutput className={controlIconClassname} />
                 </TooltipTrigger>
                 <TooltipContent>Export</TooltipContent>
               </Tooltip>