From 464d276bf472576445673d340913ab2af8bb273a Mon Sep 17 00:00:00 2001
From: Ricardo Costa <rcosta.ms358@gmail.com>
Date: Sat, 21 Mar 2026 23:17:05 +0000
Subject: [PATCH] Fix DFA Theming

---
 client/src/webview/styles.ts | 41 +++++++++++++++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/client/src/webview/styles.ts b/client/src/webview/styles.ts
index 279459f..1b4cf5a 100644
--- a/client/src/webview/styles.ts
+++ b/client/src/webview/styles.ts
@@ -440,5 +440,44 @@ export function getStyles(): string {
         .mermaid .statediagramTitleText {
             font-size: 30px!important;
         }
+        .diagram-container .mermaid svg,
+        .diagram-container .mermaid svg * {
+            color: var(--vscode-foreground) !important;
+        }
+        .diagram-container .mermaid svg text,
+        .diagram-container .mermaid svg tspan,
+        .diagram-container .mermaid svg .label,
+        .diagram-container .mermaid svg .label text,
+        .diagram-container .mermaid svg .edgeLabel text {
+            fill: var(--vscode-foreground) !important;
+        }
+        .diagram-container .mermaid svg .edgeLabel rect,
+        .diagram-container .mermaid svg .labelBkg {
+            fill: var(--vscode-editor-background) !important;
+            stroke: var(--vscode-panel-border) !important;
+        }
+        .diagram-container .mermaid .edgeLabel,
+        .diagram-container .mermaid .edgeLabel *,
+        .diagram-container .mermaid .edgeLabel p,
+        .diagram-container .mermaid .edgeLabel span,
+        .diagram-container .mermaid .edgeLabel div {
+            color: var(--vscode-foreground) !important;
+            background: var(--vscode-editor-background) !important;
+        }
+        .diagram-container .mermaid svg rect,
+        .diagram-container .mermaid svg circle,
+        .diagram-container .mermaid svg ellipse,
+        .diagram-container .mermaid svg polygon {
+            fill: var(--vscode-editor-background) !important;
+            stroke: var(--vscode-foreground) !important;
+        }
+        .diagram-container .mermaid svg path,
+        .diagram-container .mermaid svg line {
+            stroke: var(--vscode-foreground) !important;
+        }
+        .diagram-container .mermaid svg marker path {
+            fill: var(--vscode-foreground) !important;
+            stroke: var(--vscode-foreground) !important;
+        }
     `;
-}
\ No newline at end of file
+}