feat: themes

frontend/src/app/providers/layout/navigation/navigation.tsx

@@ -3,19 +3,24 @@ import { FaCode } from "react-icons/fa";
 import {
   FaHome,
   FaServer,
-  FaPalette,
   FaUser,
   FaUsers,
   FaRocket,
   FaKey,
   FaFileAlt,
+  FaSun,
+  FaMoon,
 } from "react-icons/fa";
 import { useAuthStore } from "@/modules/auth/store/useAuthStore";
+import { useThemeStore } from "@/modules/theme-bw/stores/theme.store";
 
 export const Navigation = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const { user, logout } = useAuthStore();
+  const { toggleTheme, theme } = useThemeStore();
+
+  const isDark = theme === "dark";
 
   const navItems = [
     { path: "/", label: "Главная", icon: FaHome },
@@ -25,7 +30,6 @@ export const Navigation = () => {
     { path: "/registration", label: "Регистрация", icon: FaKey },
     { path: "/logs", label: "Логи", icon: FaFileAlt },
     { path: "/admin", label: "Админка", icon: FaUsers, adminOnly: true },
-    { path: "/themes", label: "Темы", icon: FaPalette },
   ];
 
   const isActive = (path: string) => location.pathname === path;
@@ -101,6 +105,21 @@ export const Navigation = () => {
               </span>
             </div>
           )}
+
+          {/* Переключатель темы */}
+          <button
+            onClick={toggleTheme}
+            className="p-1.5 rounded-lg transition-colors"
+            style={{
+              backgroundColor: "var(--bg-secondary)",
+              color: isDark ? "#fbbf24" : "#3b82f6",
+              border: "1px solid var(--border)",
+            }}
+            title={isDark ? "Светлая тема" : "Тёмная тема"}
+          >
+            {isDark ? <FaSun size={12} /> : <FaMoon size={12} />}
+          </button>
+
           <button
             onClick={() => {
               logout();

frontend/src/app/providers/routing/routing.tsx

@@ -1,7 +1,6 @@
 import { Suspense } from "react";
 import { Routes as ReactRoutes, Route, Navigate } from "react-router-dom";
 import { HomePage } from "@/pages/home.page";
-import { ThemesPage } from "@/pages/themes.page";
 import { TestPage } from "@/pages/test.page";
 import { Graph, type GraphData } from "@/modules/graph";
 import { AuthPage } from "@/pages/auth.page";
@@ -122,7 +121,6 @@ export const Routing = () => {
 
         <Route element={<DefaultLayout />}>
           <Route path="/" element={<HomePage />} />
-          <Route path="/themes" element={<ThemesPage />} />
           <Route path="/add-agents" element={<AddAgentsPage />} />
           <Route path="/registration" element={<RegistrationTokenPage />} />
           <Route path="/logs" element={<LogsPage />} />

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>

frontend/src/modules/ide/IDE.tsx

@@ -13,16 +13,45 @@ import {
   TitleBar,
   StatusBar,
 } from "./components";
+import { useThemeStore } from "@/modules/theme-bw/stores/theme.store";
 
 interface IDEProps {
   initialFiles?: FileNode;
   onBack?: () => void;
 }
 
+const darkColors = {
+  bg: "#1e1e1e",
+  bgSecondary: "#252526",
+  bgTertiary: "#2d2d30",
+  border: "#3e3e42",
+  textPrimary: "#cccccc",
+  textSecondary: "#858585",
+  accent: "#0e639c",
+  accentHover: "#1177bb",
+  statusBar: "#007acc",
+};
+
+const lightColors = {
+  bg: "#ffffff",
+  bgSecondary: "#f3f3f3",
+  bgTertiary: "#e8e8e8",
+  border: "#e0e0e0",
+  textPrimary: "#333333",
+  textSecondary: "#616161",
+  accent: "#0e639c",
+  accentHover: "#1177bb",
+  statusBar: "#007acc",
+};
+
 export const IDE: React.FC<IDEProps> = ({
   initialFiles: externalFiles,
   onBack,
 }: IDEProps = {}) => {
+  const theme = useThemeStore((s) => s.theme);
+  const isDark = theme === "dark";
+  const c = isDark ? darkColors : lightColors;
+
   const files = useIDEStore((state) => state.files);
   const openFiles = useIDEStore((state) => state.openFiles);
   const activeFile = useIDEStore((state) => state.activeFile);
@@ -51,7 +80,7 @@ export const IDE: React.FC<IDEProps> = ({
           height: "100vh",
           display: "flex",
           flexDirection: "column",
-          backgroundColor: "#1e1e1e",
+          backgroundColor: c.bg,
           fontFamily:
             "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
           position: "relative",
@@ -66,8 +95,8 @@ export const IDE: React.FC<IDEProps> = ({
               top: "40px",
               left: "12px",
               background: "transparent",
-              border: "1px solid #3e3e42",
-              color: "#cccccc",
+              border: `1px solid ${c.border}`,
+              color: c.textPrimary,
               cursor: "pointer",
               display: "flex",
               alignItems: "center",
@@ -79,14 +108,14 @@ export const IDE: React.FC<IDEProps> = ({
               zIndex: 10,
             }}
             onMouseEnter={(e) => {
-              e.currentTarget.style.backgroundColor = "#3e3e42";
+              e.currentTarget.style.backgroundColor = c.border;
               e.currentTarget.style.color = "#fff";
               e.currentTarget.style.borderColor = "#555";
             }}
             onMouseLeave={(e) => {
               e.currentTarget.style.backgroundColor = "transparent";
-              e.currentTarget.style.color = "#cccccc";
-              e.currentTarget.style.borderColor = "#3e3e42";
+              e.currentTarget.style.color = c.textPrimary;
+              e.currentTarget.style.borderColor = c.border;
             }}
             title="Go back"
           >
@@ -117,7 +146,7 @@ export const IDE: React.FC<IDEProps> = ({
               style={{
                 fontSize: "22px",
                 marginBottom: "12px",
-                color: "#cccccc",
+                color: c.textPrimary,
                 fontWeight: 300,
               }}
             >
@@ -127,7 +156,7 @@ export const IDE: React.FC<IDEProps> = ({
               style={{
                 fontSize: "13px",
                 marginBottom: "32px",
-                color: "#858585",
+                color: c.textSecondary,
               }}
             >
               Create a new project to get started
@@ -136,7 +165,7 @@ export const IDE: React.FC<IDEProps> = ({
               onClick={createNewProject}
               style={{
                 padding: "10px 24px",
-                backgroundColor: "#0e639c",
+                backgroundColor: c.accent,
                 border: "none",
                 borderRadius: "4px",
                 color: "#fff",
@@ -146,10 +175,10 @@ export const IDE: React.FC<IDEProps> = ({
                 transition: "background-color 0.1s",
               }}
               onMouseEnter={(e) => {
-                e.currentTarget.style.backgroundColor = "#1177bb";
+                e.currentTarget.style.backgroundColor = c.accentHover;
               }}
               onMouseLeave={(e) => {
-                e.currentTarget.style.backgroundColor = "#0e639c";
+                e.currentTarget.style.backgroundColor = c.accent;
               }}
             >
               <MdAdd size={14} /> New Project
@@ -168,7 +197,7 @@ export const IDE: React.FC<IDEProps> = ({
         display: "flex",
         flexDirection: "column",
         overflow: "hidden",
-        backgroundColor: "#1e1e1e",
+        backgroundColor: c.bg,
         fontFamily:
           "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
       }}
@@ -176,14 +205,14 @@ export const IDE: React.FC<IDEProps> = ({
       <div
         style={{
           height: "30px",
-          backgroundColor: "#323233",
+          backgroundColor: c.bgTertiary,
           display: "flex",
           alignItems: "center",
           justifyContent: "space-between",
           padding: "0 8px",
-          borderBottom: "1px solid #1e1e1e",
+          borderBottom: `1px solid ${c.bg}`,
           fontSize: "12px",
-          color: "#cccccc",
+          color: c.textPrimary,
           userSelect: "none",
           flexShrink: 0,
         }}
@@ -194,7 +223,7 @@ export const IDE: React.FC<IDEProps> = ({
             style={{
               background: "transparent",
               border: "none",
-              color: "#cccccc",
+              color: c.textPrimary,
               cursor: "pointer",
               display: "flex",
               alignItems: "center",
@@ -205,12 +234,12 @@ export const IDE: React.FC<IDEProps> = ({
               transition: "all 0.1s",
             }}
             onMouseEnter={(e) => {
-              e.currentTarget.style.backgroundColor = "#3e3e42";
+              e.currentTarget.style.backgroundColor = c.border;
               e.currentTarget.style.color = "#fff";
             }}
             onMouseLeave={(e) => {
               e.currentTarget.style.backgroundColor = "transparent";
-              e.currentTarget.style.color = "#cccccc";
+              e.currentTarget.style.color = c.textPrimary;
             }}
             title="Go back"
           >

frontend/src/modules/ide/components/FilePicker.tsx

@@ -57,6 +57,7 @@ export const FilePicker: React.FC<FilePickerProps> = ({ files }) => {
       style={{
         height: "100%",
         overflowY: "auto",
+        backgroundColor: "var(--bg-primary)",
       }}
     >
       <FilePickerTree node={files} level={0} />

frontend/src/modules/ide/components/FilePickerItem.tsx

@@ -44,7 +44,7 @@ export const FilePickerItem: React.FC<FilePickerItemProps> = ({
           paddingLeft: `${paddingLeft}px`,
           paddingRight: "12px",
           height: "36px",
-          borderBottom: "1px solid #1a1a1a",
+          borderBottom: "1px solid var(--border)",
           cursor: "pointer",
           transition: "background-color 0.1s",
           gap: "8px",
@@ -57,7 +57,7 @@ export const FilePickerItem: React.FC<FilePickerItemProps> = ({
           }
         }}
         onMouseEnter={(e) => {
-          e.currentTarget.style.backgroundColor = "#2a2a2a";
+          e.currentTarget.style.backgroundColor = "var(--bg-secondary)";
         }}
         onMouseLeave={(e) => {
           e.currentTarget.style.backgroundColor = "transparent";
@@ -65,7 +65,13 @@ export const FilePickerItem: React.FC<FilePickerItemProps> = ({
       >
         {/* Folder expand icon */}
         {isFolder && (
-          <span style={{ color: "#858585", display: "flex", flexShrink: 0 }}>
+          <span
+            style={{
+              color: "var(--text-secondary)",
+              display: "flex",
+              flexShrink: 0,
+            }}
+          >
             {isExpanded ? (
               <FiChevronDown size={14} />
             ) : (
@@ -77,9 +83,9 @@ export const FilePickerItem: React.FC<FilePickerItemProps> = ({
         {/* File/Folder icon */}
         <span style={{ display: "flex", flexShrink: 0 }}>
           {isFolder ? (
-            <FiFolder size={15} color="#dcb67a" />
+            <FiFolder size={15} color="var(--accent)" />
           ) : (
-            <FiFile size={15} color="#858585" />
+            <FiFile size={15} color="var(--text-secondary)" />
           )}
         </span>
 
@@ -87,7 +93,7 @@ export const FilePickerItem: React.FC<FilePickerItemProps> = ({
         <span
           style={{
             flex: 1,
-            color: "#cccccc",
+            color: "var(--text-primary)",
             fontSize: "13px",
             overflow: "hidden",
             textOverflow: "ellipsis",
@@ -101,11 +107,11 @@ export const FilePickerItem: React.FC<FilePickerItemProps> = ({
         {!isFolder && extension && (
           <span
             style={{
-              color: "#858585",
+              color: "var(--text-secondary)",
               fontSize: "11px",
               fontFamily: "monospace",
               padding: "2px 6px",
-              backgroundColor: "#2a2a2a",
+              backgroundColor: "var(--bg-secondary)",
               borderRadius: "3px",
               flexShrink: 0,
             }}
@@ -120,7 +126,9 @@ export const FilePickerItem: React.FC<FilePickerItemProps> = ({
             style={{
               width: "18px",
               height: "18px",
-              border: isSelected ? "2px solid #0e639c" : "2px solid #555",
+              border: isSelected
+                ? "2px solid #0e639c"
+                : "2px solid var(--border)",
               borderRadius: "3px",
               backgroundColor: isSelected ? "#0e639c" : "transparent",
               display: "flex",

frontend/src/pages/ide.page.tsx

@@ -8,7 +8,10 @@ export const IDEPage = () => {
   const files: FileNode | undefined = location.state?.files;
 
   return (
-    <div className="absolute top-0 left-0 w-full h-full z-90">
+    <div
+      className="absolute top-0 left-0 w-full h-full z-90"
+      style={{ backgroundColor: "var(--bg-primary)" }}
+    >
       <IDE onBack={() => navigate("/templates")} initialFiles={files} />
     </div>
   );

frontend/src/pages/templates.page.tsx

@@ -118,6 +118,7 @@ export const TemplatesPage = () => {
       style={{
         height: "100vh",
         position: "relative",
+        backgroundColor: "var(--bg-primary)",
       }}
     >
       {/* Floating header */}
@@ -139,13 +140,13 @@ export const TemplatesPage = () => {
             alignItems: "center",
             gap: "8px",
             padding: "6px 12px",
-            backgroundColor: "#1a1a1a",
+            backgroundColor: "var(--card-bg)",
             borderRadius: "4px",
-            border: "1px solid #2a2a2a",
+            border: "1px solid var(--border)",
           }}
         >
           <FiPlay size={13} color="#61c454" />
-          <span style={{ fontSize: "12px", color: "#858585" }}>
+          <span style={{ fontSize: "12px", color: "var(--text-secondary)" }}>
             {selectedPaths.size} script{selectedPaths.size !== 1 ? "s" : ""}{" "}
             running
           </span>

frontend/src/pages/themes.page.tsx

@@ -1,9 +0,0 @@
-import { ThemeChanger } from "@/modules/theme-changer";
-
-export const ThemesPage = () => {
-  return (
-    <div>
-      <ThemeChanger label="Выбор тем приложения" />
-    </div>
-  );
-};