feat: themes

frontend/src/modules/graph/Graph.tsx

@@ -70,12 +70,18 @@ export const Graph: React.FC<GraphProps> = ({
   }
 
   return (
-    <div className="bg-gray-900 p-4 h-full flex flex-col">
+    <div
+      className="p-4 h-full flex flex-col"
+      style={{ backgroundColor: "var(--card-bg)" }}
+    >
       {/* Статистика сверху */}
       <GraphStats data={data} />
 
       {/* Граф */}
-      <div className="flex-1 border border-gray-800 rounded-lg overflow-hidden relative mt-2">
+      <div
+        className="flex-1 rounded-lg overflow-hidden relative mt-2"
+        style={{ border: "1px solid var(--border)" }}
+      >
         <ForceGraph
           ref={fgRef}
           data={data}

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);

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

@@ -1,6 +1,11 @@
 import React from "react";
 import { FiLink, FiTrash2, FiMinusCircle } from "react-icons/fi";
-import type { ContextMenuState, GraphNode, GraphLink, GraphData } from "../types";
+import type {
+  ContextMenuState,
+  GraphNode,
+  GraphLink,
+  GraphData,
+} from "../types";
 import { useGraphStore } from "../store/useGraphStore";
 
 interface GraphContextMenuProps {
@@ -39,24 +44,49 @@ export const GraphContextMenu: React.FC<GraphContextMenuProps> = ({
 
   return (
     <div
-      className="fixed bg-gray-800 rounded-lg shadow-lg border border-gray-700 py-1 z-50"
-      style={{ top: menu.y, left: menu.x }}
+      className="fixed rounded-lg shadow-lg py-1 z-50"
+      style={{
+        top: menu.y,
+        left: menu.x,
+        backgroundColor: "var(--card-bg)",
+        border: "1px solid var(--border)",
+      }}
       onClick={(e) => e.stopPropagation()}
     >
       {menu.node && (
         <>
-          <div className="px-3 py-1 text-xs text-gray-400 border-b border-gray-700">
+          <div
+            className="px-3 py-1 text-xs border-b"
+            style={{
+              color: "var(--text-secondary)",
+              borderColor: "var(--border)",
+            }}
+          >
             {menu.node.name}
           </div>
           <button
             onClick={() => handleCreateLink(menu.node!)}
-            className="w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 flex items-center gap-2"
+            className="w-full text-left px-4 py-2 text-sm flex items-center gap-2"
+            style={{ color: "var(--text-primary)" }}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = "var(--bg-secondary)")
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = "transparent")
+            }
           >
             <FiLink size={14} /> Создать связь
           </button>
           <button
             onClick={() => handleDeleteNode(menu.node!)}
-            className="w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-gray-700 flex items-center gap-2"
+            className="w-full text-left px-4 py-2 text-sm flex items-center gap-2"
+            style={{ color: "#f87171" }}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = "rgba(248,113,113,0.1)")
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = "transparent")
+            }
           >
             <FiTrash2 size={14} /> Удалить узел
           </button>
@@ -64,11 +94,18 @@ export const GraphContextMenu: React.FC<GraphContextMenuProps> = ({
       )}
       {menu.link && (
         <>
-          <div className="px-3 py-1 text-xs text-gray-400 border-b border-gray-700">
+          <div
+            className="px-3 py-1 text-xs border-b"
+            style={{
+              color: "var(--text-secondary)",
+              borderColor: "var(--border)",
+            }}
+          >
             Связь:{" "}
             {typeof menu.link.source === "string"
               ? menu.link.source
-              : (menu.link.source as any).name || (menu.link.source as any).id}{" "}
+              : (menu.link.source as any).name ||
+                (menu.link.source as any).id}{" "}
             →{" "}
             {typeof menu.link.target === "string"
               ? menu.link.target
@@ -76,7 +113,14 @@ export const GraphContextMenu: React.FC<GraphContextMenuProps> = ({
           </div>
           <button
             onClick={() => handleDeleteLink(menu.link!)}
-            className="w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-gray-700 flex items-center gap-2"
+            className="w-full text-left px-4 py-2 text-sm flex items-center gap-2"
+            style={{ color: "#f87171" }}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = "rgba(248,113,113,0.1)")
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = "transparent")
+            }
           >
             <FiMinusCircle size={14} /> Удалить связь
           </button>

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

@@ -4,7 +4,6 @@ import {
   FiZoomIn,
   FiZoomOut,
   FiMove,
-  FiPlus,
   FiLink,
 } from "react-icons/fi";
 import { useGraphStore } from "../store/useGraphStore";
@@ -16,37 +15,20 @@ interface GraphControlsProps {
   onDataChange?: (data: GraphData) => void;
 }
 
+const btnStyle: React.CSSProperties = {
+  backgroundColor: "var(--bg-secondary)",
+  color: "var(--text-primary)",
+};
+
 export const GraphControls: React.FC<GraphControlsProps> = ({
   fgRef,
   onExport,
   onDataChange,
 }) => {
   const isLinkMode = useGraphStore((s) => s.isLinkMode);
-  const selectedNode = useGraphStore((s) => s.selectedNode);
-  const data = useGraphStore((s) => s.data);
   const toggleLinkMode = useGraphStore((s) => s.toggleLinkMode);
-  const addNode = useGraphStore((s) => s.addNode);
   const exportData = useGraphStore((s) => s.exportData);
 
-  const handleAddNode = () => {
-    const newNodeName = prompt(
-      "Введите имя узла:",
-      `Node ${data.nodes.length + 1}`,
-    );
-    if (newNodeName) {
-      const isService = window.confirm(
-        "Выберите тип: OK - Сервис, Отмена - Агент",
-      );
-      addNode({
-        id: `node-${Date.now()}`,
-        name: newNodeName,
-        type: isService ? "service" : "agent",
-        val: isService ? 12 : 8,
-        description: "Новый узел",
-      });
-    }
-  };
-
   const handleZoomIn = () => {
     if (fgRef.current) {
       const currentZoom = fgRef.current.zoom();
@@ -72,22 +54,21 @@ export const GraphControls: React.FC<GraphControlsProps> = ({
       {/* Режим создания связи */}
       <button
         onClick={toggleLinkMode}
-        className={`flex w-full items-center gap-2 px-3 py-2 rounded-lg transition-colors ${
-          isLinkMode
-            ? "bg-green-600 hover:bg-green-700 text-white"
-            : "bg-gray-800 hover:bg-gray-700 text-gray-300"
-        }`}
+        className="flex w-full items-center gap-2 px-3 py-2 rounded-lg transition-colors text-sm"
+        style={{
+          backgroundColor: isLinkMode ? "#22c55e" : "var(--bg-secondary)",
+          color: isLinkMode ? "#fff" : "var(--text-primary)",
+        }}
       >
         <FiLink />
-        <span className="text-sm">
-          {isLinkMode ? "Создание связи..." : "Добавить связь"}
-        </span>
+        <span>{isLinkMode ? "Создание связи..." : "Добавить связь"}</span>
       </button>
 
       {/* Зум + */}
       <button
         onClick={handleZoomIn}
-        className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
+        className="p-2 rounded-lg transition-colors"
+        style={btnStyle}
       >
         <FiZoomIn />
       </button>
@@ -95,7 +76,8 @@ export const GraphControls: React.FC<GraphControlsProps> = ({
       {/* Зум - */}
       <button
         onClick={handleZoomOut}
-        className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
+        className="p-2 rounded-lg transition-colors"
+        style={btnStyle}
       >
         <FiZoomOut />
       </button>
@@ -103,7 +85,8 @@ export const GraphControls: React.FC<GraphControlsProps> = ({
       {/* Fit */}
       <button
         onClick={handleFit}
-        className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
+        className="p-2 rounded-lg transition-colors"
+        style={btnStyle}
       >
         <FiMove />
       </button>
@@ -111,10 +94,11 @@ export const GraphControls: React.FC<GraphControlsProps> = ({
       {/* Экспорт */}
       <button
         onClick={onExport || exportData}
-        className="flex items-center gap-2 px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
+        className="flex items-center gap-2 px-3 py-2 rounded-lg transition-colors text-sm"
+        style={btnStyle}
       >
         <FiDownload />
-        <span className="text-sm">Экспорт</span>
+        <span>Экспорт</span>
       </button>
     </div>
   );

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

@@ -7,15 +7,19 @@ interface GraphStatsProps {
 
 export const GraphStats: React.FC<GraphStatsProps> = ({ data }) => {
   return (
-    <div className="flex gap-4 text-xs text-gray-400">
+    <div
+      className="flex gap-4 text-xs"
+      style={{ color: "var(--text-secondary)" }}
+    >
       <span>
         Сервисы: {data.nodes.filter((n) => n.type === "service").length}
       </span>
-      <span>
-        Агенты: {data.nodes.filter((n) => n.type === "agent").length}
-      </span>
+      <span>Агенты: {data.nodes.filter((n) => n.type === "agent").length}</span>
       <div className="flex items-center gap-1.5">
-        <div className="w-2 h-2 bg-gray-500 rounded-sm"></div>
+        <div
+          className="w-2 h-2 rounded-sm"
+          style={{ backgroundColor: "var(--text-muted)" }}
+        ></div>
         <span>Связи: {data.links.length}</span>
       </div>
     </div>

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

@@ -14,7 +14,10 @@ export const GraphStatusBar: React.FC<GraphStatusBarProps> = ({
   if (!isLinkMode) return null;
 
   return (
-    <div className="absolute bottom-4 left-4 bg-green-600 text-white px-3 py-1 rounded-lg text-sm flex items-center gap-2">
+    <div
+      className="absolute bottom-4 left-4 text-white px-3 py-1 rounded-lg text-sm flex items-center gap-2"
+      style={{ backgroundColor: "#22c55e" }}
+    >
       <FiLink /> Режим создания связей: кликните на два узла для соединения
       {selectedNode && (
         <span className="ml-2">Выбран: {selectedNode.name}</span>