feat: themes

frontend/src/modules/graph/components/ForceGraph.tsx

@@ -8,6 +8,7 @@ import React, {
 import ForceGraph2D from "react-force-graph-2d";
 import type { GraphData, GraphNode, GraphLink } from "../types";
 import { useGraphStore } from "../store/useGraphStore";
+import { useThemeStore } from "@/modules/theme-bw/stores/theme.store";
 
 interface ForceGraphProps {
   data: GraphData;
@@ -24,6 +25,12 @@ export const ForceGraph = forwardRef<any, ForceGraphProps>(
     const highlightLinks = useGraphStore((s) => s.highlightLinks);
     const selectedNode = useGraphStore((s) => s.selectedNode);
     const isLinkMode = useGraphStore((s) => s.isLinkMode);
+    const theme = useThemeStore((s) => s.theme);
+    const isDark = theme === "dark";
+
+    // Определяем цвета текста в зависимости от темы
+    const nodeTextColor = isDark ? "#e5e7eb" : "#1f2937";
+    const nodeTextLetterColor = isDark ? "#ffffff" : "#000000";
 
     // ResizeObserver для корректного отслеживания размеров
     useEffect(() => {
@@ -119,7 +126,7 @@ export const ForceGraph = forwardRef<any, ForceGraphProps>(
       ctx.fillStyle = color;
       ctx.fill();
 
-      ctx.fillStyle = "#ffffff";
+      ctx.fillStyle = nodeTextLetterColor;
       ctx.font = `${size}px "Segoe UI Emoji", "Apple Color Emoji", sans-serif`;
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
@@ -131,7 +138,7 @@ export const ForceGraph = forwardRef<any, ForceGraphProps>(
       }
 
       if (globalScale > 0.5) {
-        ctx.fillStyle = "#e5e7eb";
+        ctx.fillStyle = nodeTextColor;
         ctx.font = `${Math.min(12, 12 / globalScale)}px "Arial", sans-serif`;
         ctx.textAlign = "center";
         ctx.fillText(node.name, node.x, node.y + size + 8);