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/pages/flow/canvas/edge/index.less

@@ -13,3 +13,19 @@
 .edgeButton:hover {
   box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.08);
 }
+
+.edgeButtonDark {
+  width: 14px;
+  height: 14px;
+  background: #0e0c0c;
+  border: 1px solid #fff;
+  padding: 0;
+  cursor: pointer;
+  border-radius: 50%;
+  font-size: 10px;
+  line-height: 1;
+}
+
+.edgeButtonDark:hover {
+  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.08);
+}

web/src/pages/flow/canvas/edge/index.tsx

@@ -6,6 +6,7 @@ import {
 } from 'reactflow';
 import useGraphStore from '../../store';
 
+import { useTheme } from '@/components/theme-provider';
 import { useFetchFlow } from '@/hooks/flow-hooks';
 import { useMemo } from 'react';
 import styles from './index.less';
@@ -33,7 +34,7 @@ export function ButtonEdge({
     targetY,
     targetPosition,
   });
-
+  const { theme } = useTheme();
   const selectedStyle = useMemo(() => {
     return selected ? { strokeWidth: 2, stroke: '#1677ff' } : {};
   }, [selected]);
@@ -93,7 +94,9 @@ export function ButtonEdge({
           className="nodrag nopan"
         >
           <button
-            className={styles.edgeButton}
+            className={
+              theme === 'dark' ? styles.edgeButtonDark : styles.edgeButton
+            }
             type="button"
             onClick={onEdgeClick}
           >