cherry-pick 0aef6a16

lightrag_webui/src/components/graph/GraphControl.tsx

@@ -302,6 +302,10 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
 
         if (!disableHoverEffect) {
           const _focusedNode = focusedNode || selectedNode
+          // Choose edge highlight color based on theme
+          const edgeHighlightColor = isDarkTheme 
+            ? Constants.edgeColorHighlightedDarkTheme 
+            : Constants.edgeColorHighlightedLightTheme
 
           if (_focusedNode && graph.hasNode(_focusedNode)) {
             try {
@@ -311,7 +315,7 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
                 }
               } else {
                 if (graph.extremities(edge).includes(_focusedNode)) {
-                  newData.color = Constants.edgeColorHighlighted
+                  newData.color = edgeHighlightColor
                 }
               }
             } catch (error) {
@@ -326,7 +330,7 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
               if (edge === _selectedEdge) {
                 newData.color = Constants.edgeColorSelected
               } else if (edge === _focusedEdge) {
-                newData.color = Constants.edgeColorHighlighted
+                newData.color = edgeHighlightColor
               } else if (hideUnselectedEdges) {
                 newData.hidden = true
               }

lightrag_webui/src/lib/constants.ts

@@ -14,7 +14,8 @@ export const nodeBorderColorSelected = '#F57F17'
 
 export const edgeColorDarkTheme = '#888888'
 export const edgeColorSelected = '#F57F17'
-export const edgeColorHighlighted = '#FFFFFF'
+export const edgeColorHighlightedDarkTheme = '#F57F17'
+export const edgeColorHighlightedLightTheme = '#F57F17'
 
 export const searchResultLimit = 50
 export const labelListLimit = 100