fix: resolve dark mode text visibility issue in knowledge graph view

- Replace hardcoded black text colors (#000) with dynamic theme-based colors
- Add createSigmaSettings function to generate settings based on theme
- Use labelColorDarkTheme (#B2EBF2) for dark mode and black (#000) for light mode
- Update GraphViewer component to react to theme changes
- Fixes issue where node and edge labels were invisible in dark mode

Fixes: Dark mode text visibility in knowledge graph visualization

lightrag_webui/src/features/GraphViewer.tsx

@@ -23,12 +23,13 @@ import LegendButton from '@/components/graph/LegendButton'
 
 import { useSettingsStore } from '@/stores/settings'
 import { useGraphStore } from '@/stores/graph'
+import { labelColorDarkTheme } from '@/lib/constants'
 
 import '@react-sigma/core/lib/style.css'
 import '@react-sigma/graph-search/lib/style.css'
 
-// Sigma settings
+// Function to create sigma settings based on theme
-const defaultSigmaSettings: Partial<SigmaSettings> = {
+const createSigmaSettings = (isDarkTheme: boolean): Partial<SigmaSettings> => ({
   allowInvalidContainer: true,
   defaultNodeType: 'default',
   defaultEdgeType: 'curvedNoArrow',
@@ -47,18 +48,18 @@ const defaultSigmaSettings: Partial<SigmaSettings> = {
   labelRenderedSizeThreshold: 12,
   enableEdgeEvents: true,
   labelColor: {
-    color: '#000',
+    color: isDarkTheme ? labelColorDarkTheme : '#000',
     attribute: 'labelColor'
   },
   edgeLabelColor: {
-    color: '#000',
+    color: isDarkTheme ? labelColorDarkTheme : '#000',
     attribute: 'labelColor'
   },
   edgeLabelSize: 8,
   labelSize: 12
   // minEdgeThickness: 2
   // labelFont: 'Lato, sans-serif'
-}
+})
 
 const GraphEvents = () => {
   const registerEvents = useRegisterEvents()
@@ -107,7 +108,7 @@ const GraphEvents = () => {
 }
 
 const GraphViewer = () => {
-  const [sigmaSettings, setSigmaSettings] = useState(defaultSigmaSettings)
+  const [sigmaSettings, setSigmaSettings] = useState<Partial<SigmaSettings>>({})
   const sigmaRef = useRef<any>(null)
 
   const selectedNode = useGraphStore.use.selectedNode()
@@ -119,13 +120,15 @@ const GraphViewer = () => {
   const showNodeSearchBar = useSettingsStore.use.showNodeSearchBar()
   const enableNodeDrag = useSettingsStore.use.enableNodeDrag()
   const showLegend = useSettingsStore.use.showLegend()
+  const theme = useSettingsStore.use.theme()
 
-  // Initialize sigma settings once on component mount
+  // Initialize sigma settings based on theme
-  // All dynamic settings will be updated in GraphControl using useSetSettings
   useEffect(() => {
-    setSigmaSettings(defaultSigmaSettings)
+    const isDarkTheme = theme === 'dark'
-    console.log('Initialized sigma settings')
+    const settings = createSigmaSettings(isDarkTheme)
-  }, [])
+    setSigmaSettings(settings)
+    console.log('Initialized sigma settings for theme:', theme)
+  }, [theme])
 
   // Clean up sigma instance when component unmounts
   useEffect(() => {