fix(flowchart): sync node card theme with VS Code webview classes

- prioritize `body.vscode-*` theme classes for flowchart color tokens
- prevent system `prefers-color-scheme` from overriding VS Code iframe theme
- align flowchart canvas background with VS Code editor/panel background vars

Author: Windsland52

src/views/flowchart/styles/flowchartView.theme.css

@@ -27,14 +27,76 @@ body {
   --flowchart-chevron-stroke-width: 1;
 }
 
+/* VS Code dark theme classes (and forced dark) should always use dark palette */
+body.vscode-dark:not(.force-light),
+body.vscode-high-contrast:not(.force-light),
+body.force-dark {
+  --flowchart-success-bg: #1a3a2a;
+  --flowchart-success-border: #18a058;
+  --flowchart-success-text: #a0d8b0;
+  --flowchart-running-bg: #3a331a;
+  --flowchart-running-border: #f0a020;
+  --flowchart-running-text: #f5d38f;
+  --flowchart-failed-bg: #3a1a1a;
+  --flowchart-failed-border: #d03050;
+  --flowchart-failed-text: #d8a0a0;
+  --flowchart-notexec-bg: #2a2a2a;
+  --flowchart-notexec-border: #666;
+  --flowchart-notexec-text: #888;
+  --flowchart-badge-bg: rgba(255, 255, 255, 0.1);
+  --flowchart-badge-text: #aaa;
+  --flowchart-hover-ring: rgba(24, 160, 88, 0.5);
+  --flowchart-selected-ring: rgba(24, 160, 88, 0.9);
+  --flowchart-nav-hover: rgba(255, 255, 255, 0.06);
+  --flowchart-nav-active: rgba(24, 160, 88, 0.2);
+  --flowchart-popover-bg: var(--vscode-editorWidget-background, #2a2a2a);
+  --flowchart-popover-border: var(--vscode-widget-border, #444);
+  --flowchart-popover-close: #888;
+  --flowchart-popover-close-hover: #ddd;
+  --flowchart-popover-secondary: #999;
+  --flowchart-chevron-fill: #ffffff;
+  --flowchart-chevron-stroke-width: 1;
+}
+
+/* VS Code light theme classes (and forced light) should always use light palette */
+body.vscode-light:not(.force-dark),
+body.vscode-high-contrast-light:not(.force-dark),
+body.force-light {
+  --flowchart-success-bg: #e8f5e9;
+  --flowchart-success-border: #18a058;
+  --flowchart-success-text: #1a3a1a;
+  --flowchart-running-bg: #fff6e5;
+  --flowchart-running-border: #f0a020;
+  --flowchart-running-text: #5c3b00;
+  --flowchart-failed-bg: #fdecea;
+  --flowchart-failed-border: #d03050;
+  --flowchart-failed-text: #3a1a1a;
+  --flowchart-notexec-bg: #f5f5f5;
+  --flowchart-notexec-border: #999;
+  --flowchart-notexec-text: #888;
+  --flowchart-badge-bg: rgba(0, 0, 0, 0.08);
+  --flowchart-badge-text: #666;
+  --flowchart-hover-ring: rgba(24, 160, 88, 0.4);
+  --flowchart-selected-ring: rgba(24, 160, 88, 0.8);
+  --flowchart-nav-hover: rgba(0, 0, 0, 0.04);
+  --flowchart-nav-active: rgba(24, 160, 88, 0.1);
+  --flowchart-popover-bg: var(--vscode-editorWidget-background, #fff);
+  --flowchart-popover-border: var(--vscode-widget-border, #e0e0e0);
+  --flowchart-popover-close: #999;
+  --flowchart-popover-close-hover: #333;
+  --flowchart-popover-secondary: #888;
+  --flowchart-chevron-fill: #000000;
+  --flowchart-chevron-stroke-width: 0;
+}
+
 /* Vue Flow canvas: dark background (default) */
 .vue-flow {
-  background: var(--vscode-panel-background);
+  background: var(--vscode-editor-background, var(--vscode-panel-background));
 }
 
 /* Light theme — system preference when not forced dark */
 @media (prefers-color-scheme: light) {
-  body:not(.force-dark) {
+  body:not(.force-dark):not(.vscode-light):not(.vscode-high-contrast-light):not(.vscode-dark):not(.vscode-high-contrast) {
     --flowchart-success-bg: #e8f5e9;
     --flowchart-success-border: #18a058;
     --flowchart-success-text: #1a3a1a;
@@ -62,40 +124,7 @@ body {
     --flowchart-chevron-stroke-width: 0;
   }
 
-  body:not(.force-dark) .vue-flow {
-    background: var(--vscode-panel-background);
+  body:not(.force-dark):not(.vscode-light):not(.vscode-high-contrast-light):not(.vscode-dark):not(.vscode-high-contrast) .vue-flow {
+    background: var(--vscode-editor-background, var(--vscode-panel-background));
   }
 }
-
-/* Forced light theme */
-body.force-light {
-  --flowchart-success-bg: #e8f5e9;
-  --flowchart-success-border: #18a058;
-  --flowchart-success-text: #1a3a1a;
-  --flowchart-running-bg: #fff6e5;
-  --flowchart-running-border: #f0a020;
-  --flowchart-running-text: #5c3b00;
-  --flowchart-failed-bg: #fdecea;
-  --flowchart-failed-border: #d03050;
-  --flowchart-failed-text: #3a1a1a;
-  --flowchart-notexec-bg: #f5f5f5;
-  --flowchart-notexec-border: #999;
-  --flowchart-notexec-text: #888;
-  --flowchart-badge-bg: rgba(0, 0, 0, 0.08);
-  --flowchart-badge-text: #666;
-  --flowchart-hover-ring: rgba(24, 160, 88, 0.4);
-  --flowchart-selected-ring: rgba(24, 160, 88, 0.8);
-  --flowchart-nav-hover: rgba(0, 0, 0, 0.04);
-  --flowchart-nav-active: rgba(24, 160, 88, 0.1);
-  --flowchart-popover-bg: #fff;
-  --flowchart-popover-border: #e0e0e0;
-  --flowchart-popover-close: #999;
-  --flowchart-popover-close-hover: #333;
-  --flowchart-popover-secondary: #888;
-  --flowchart-chevron-fill: #000000;
-  --flowchart-chevron-stroke-width: 0;
-}
-
-body.force-light .vue-flow {
-  background: var(--vscode-panel-background);
-}