perf: 完善黑夜模式的表现效果，工作流编排幕布和节点在黑夜模式正常表现

easyflow-ui-admin/packages/tinyflow-ui/src/styles/variable.less

@@ -1,14 +1,144 @@
-
 :root,
 :root .tf-theme-light {
-  --tf-primary-color: #2563EB;
+  --tf-primary-color: #2563eb;
+  --tf-primary-color-hover: #3a6fe3;
+  --tf-primary-soft-bg: #eff6ff;
+  --tf-primary-soft-border: #bfdbfe;
+  --tf-primary-ghost-bg: rgba(37, 99, 235, 0.08);
+  --tf-danger-color: #ef4444;
+  --tf-danger-hover: #dc2626;
+  --tf-danger-soft-bg: #fff1f1;
+  --tf-danger-soft-border: #f5c7c4;
+  --tf-danger-soft-text: #b42318;
+  --tf-danger-icon-color: #d92d20;
+  --tf-warning-soft-bg: #fff8e6;
+  --tf-warning-soft-border: #f7d79e;
+  --tf-warning-soft-text: #92400e;
+  --tf-warning-icon-color: #d97706;
+
+  --tf-bg-canvas: #f8fafc;
+  --tf-bg-surface: #ffffff;
+  --tf-bg-surface-alt: #f9fafb;
+  --tf-bg-muted: #f3f4f6;
+  --tf-bg-hover: #f1f5f9;
+  --tf-bg-active: #e2e8f0;
+  --tf-bg-input: #ffffff;
+  --tf-bg-input-disabled: #f3f4f6;
+  --tf-bg-tag: rgba(0, 0, 0, 0.06);
+
+  --tf-border-color: #e5e7eb;
+  --tf-border-color-strong: #d1d5db;
+  --tf-border-color-soft: #f3f4f6;
+  --tf-node-outline-color: #d1d5db;
+  --tf-node-hover-border: rgba(186, 202, 239, 0.49);
+
+  --tf-text-primary: #111827;
+  --tf-text-secondary: #6b7280;
+  --tf-text-muted: #9ca3af;
+  --tf-text-disabled: #9ca3af;
+
+  --tf-icon-bg: #cedafb;
+  --tf-icon-color: #3474ff;
+  --tf-loop-handle-text: #ffffff;
+
+  --tf-shadow-soft: 0 2px 4px rgba(0, 0, 0, 0.08);
+  --tf-shadow-medium: 0 10px 25px rgba(0, 0, 0, 0.15);
+  --tf-focus-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
+  --tf-tip-bg: #0f172a;
+  --tf-tip-text: #f8fafc;
+  --tf-scrollbar-thumb: #d6dce8;
+  --tf-slider-track-bg: #d1d5db;
+  --tf-slider-thumb-bg: var(--tf-primary-color);
+
   --xy-node-boxshadow-selected: 0 0 0 1px var(--tf-primary-color);
   --xy-handle-background-color: var(--tf-primary-color);
-
+  --xy-handle-border-color: var(--tf-bg-surface);
+  --xy-background-color: var(--tf-bg-canvas);
+  --xy-background-pattern-dots-color: #d1d5db;
+  --xy-background-pattern-lines-color: #e5e7eb;
+  --xy-background-pattern-cross-color: #e2e8f0;
+  --xy-edge-stroke: #94a3b8;
+  --xy-edge-stroke-selected: var(--tf-primary-color);
+  --xy-controls-button-background-color: var(--tf-bg-surface);
+  --xy-controls-button-background-color-hover: var(--tf-bg-hover);
+  --xy-controls-button-color: var(--tf-text-secondary);
+  --xy-controls-button-color-hover: var(--tf-text-primary);
+  --xy-controls-button-border-color: var(--tf-border-color);
+  --xy-minimap-background-color: var(--tf-bg-surface);
+  --xy-minimap-mask-background-color: rgba(241, 245, 249, 0.68);
+  --xy-minimap-node-background-color: #cbd5e1;
+  --xy-edge-label-background-color: var(--tf-bg-surface);
+  --xy-edge-label-color: var(--tf-text-primary);
 }
 
-
-//the dark theme variables
 :root .tf-theme-dark {
+  --tf-primary-color: #60a5fa;
+  --tf-primary-color-hover: #93c5fd;
+  --tf-primary-soft-bg: rgba(96, 165, 250, 0.18);
+  --tf-primary-soft-border: rgba(96, 165, 250, 0.35);
+  --tf-primary-ghost-bg: rgba(96, 165, 250, 0.12);
+  --tf-danger-color: #f87171;
+  --tf-danger-hover: #ef4444;
+  --tf-danger-soft-bg: rgba(248, 113, 113, 0.16);
+  --tf-danger-soft-border: rgba(248, 113, 113, 0.28);
+  --tf-danger-soft-text: #fca5a5;
+  --tf-danger-icon-color: #f87171;
+  --tf-warning-soft-bg: rgba(217, 119, 6, 0.2);
+  --tf-warning-soft-border: rgba(217, 119, 6, 0.35);
+  --tf-warning-soft-text: #fbbf24;
+  --tf-warning-icon-color: #f59e0b;
 
+  --tf-bg-canvas: #0b1220;
+  --tf-bg-surface: #111827;
+  --tf-bg-surface-alt: #1f2937;
+  --tf-bg-muted: #273449;
+  --tf-bg-hover: #334155;
+  --tf-bg-active: #3b4b63;
+  --tf-bg-input: #0f172a;
+  --tf-bg-input-disabled: #0b1324;
+  --tf-bg-tag: rgba(148, 163, 184, 0.2);
+
+  --tf-border-color: #334155;
+  --tf-border-color-strong: #475569;
+  --tf-border-color-soft: #263449;
+  --tf-node-outline-color: #475569;
+  --tf-node-hover-border: rgba(96, 165, 250, 0.38);
+
+  --tf-text-primary: #e5e7eb;
+  --tf-text-secondary: #cbd5e1;
+  --tf-text-muted: #94a3b8;
+  --tf-text-disabled: #64748b;
+
+  --tf-icon-bg: rgba(96, 165, 250, 0.2);
+  --tf-icon-color: #93c5fd;
+  --tf-loop-handle-text: #f8fafc;
+
+  --tf-shadow-soft: 0 2px 8px rgba(2, 6, 23, 0.35);
+  --tf-shadow-medium: 0 10px 25px rgba(2, 6, 23, 0.48);
+  --tf-focus-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
+  --tf-tip-bg: #020617;
+  --tf-tip-text: #e2e8f0;
+  --tf-scrollbar-thumb: #475569;
+  --tf-slider-track-bg: #475569;
+  --tf-slider-thumb-bg: #93c5fd;
+
+  --xy-node-boxshadow-selected: 0 0 0 1px var(--tf-primary-color);
+  --xy-handle-background-color: var(--tf-primary-color);
+  --xy-handle-border-color: var(--tf-bg-canvas);
+  --xy-background-color: var(--tf-bg-canvas);
+  --xy-background-pattern-dots-color: #334155;
+  --xy-background-pattern-lines-color: #334155;
+  --xy-background-pattern-cross-color: #334155;
+  --xy-edge-stroke: #64748b;
+  --xy-edge-stroke-selected: #93c5fd;
+  --xy-controls-button-background-color: var(--tf-bg-surface);
+  --xy-controls-button-background-color-hover: var(--tf-bg-hover);
+  --xy-controls-button-color: var(--tf-text-secondary);
+  --xy-controls-button-color-hover: var(--tf-text-primary);
+  --xy-controls-button-border-color: var(--tf-border-color);
+  --xy-minimap-background-color: var(--tf-bg-surface);
+  --xy-minimap-mask-background-color: rgba(15, 23, 42, 0.7);
+  --xy-minimap-node-background-color: #475569;
+  --xy-edge-label-background-color: var(--tf-bg-surface);
+  --xy-edge-label-color: var(--tf-text-primary);
 }