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>