diff --git a/docs/src/content/docs/guides/campaigns/specs.md b/docs/src/content/docs/guides/campaigns/specs.md
index 4f8b96a06e..9e7568a67d 100644
--- a/docs/src/content/docs/guides/campaigns/specs.md
+++ b/docs/src/content/docs/guides/campaigns/specs.md
@@ -40,10 +40,11 @@ flowchart TB
     orchestrator -.->|reads/writes| memory
     project -.->|dashboard view| orchestrator
 
-    classDef tracked fill:#d4edda,stroke:#28a745,stroke-width:2px
-    classDef notTracked fill:#fff3cd,stroke:#ffc107,stroke-width:2px
-    classDef workflow fill:#cfe2ff,stroke:#0d6efd,stroke-width:2px
-    classDef external fill:#f8d7da,stroke:#dc3545,stroke-width:2px
+    %% Colors are applied via CSS for light/dark themes; keep only stroke width here.
+    classDef tracked stroke-width:2px
+    classDef notTracked stroke-width:2px
+    classDef workflow stroke-width:2px
+    classDef external stroke-width:2px
 
     class spec,lock tracked
     class debug notTracked
diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css
index a13ff1b501..af11fd4b7b 100644
--- a/docs/src/styles/custom.css
+++ b/docs/src/styles/custom.css
@@ -79,6 +79,84 @@
   animation: light-glow-move 20s ease-in-out infinite;
 }
 
+/* Campaign specs Mermaid diagram colors
+   We style Mermaid nodes by their class (tracked, notTracked, workflow, external)
+   so we can use lighter colors in light mode and darker colors in dark mode. */
+
+/* Default (dark theme): stronger fills with light text */
+.mermaid .tracked rect,
+.mermaid .tracked polygon {
+  fill: #6b46c1;
+  stroke: #5b3da3;
+}
+.mermaid .tracked text {
+  fill: #ffffff;
+}
+
+.mermaid .notTracked rect,
+.mermaid .notTracked polygon {
+  fill: #424a53;
+  stroke: #2d333b;
+}
+.mermaid .notTracked text {
+  fill: #ffffff;
+}
+
+.mermaid .workflow rect,
+.mermaid .workflow polygon {
+  fill: #0969da;
+  stroke: #0753b6;
+}
+.mermaid .workflow text {
+  fill: #ffffff;
+}
+
+.mermaid .external rect,
+.mermaid .external polygon {
+  fill: #bf3989;
+  stroke: #7d2457;
+}
+.mermaid .external text {
+  fill: #ffffff;
+}
+
+/* Light theme: pastel fills with dark text */
+:root[data-theme='light'] .mermaid .tracked rect,
+:root[data-theme='light'] .mermaid .tracked polygon {
+  fill: #e3d5ff;
+  stroke: #6b46c1;
+}
+:root[data-theme='light'] .mermaid .tracked text {
+  fill: #000000;
+}
+
+:root[data-theme='light'] .mermaid .notTracked rect,
+:root[data-theme='light'] .mermaid .notTracked polygon {
+  fill: #e1e4e8;
+  stroke: #8d96a0;
+}
+:root[data-theme='light'] .mermaid .notTracked text {
+  fill: #000000;
+}
+
+:root[data-theme='light'] .mermaid .workflow rect,
+:root[data-theme='light'] .mermaid .workflow polygon {
+  fill: #c6e6ff;
+  stroke: #0969da;
+}
+:root[data-theme='light'] .mermaid .workflow text {
+  fill: #000000;
+}
+
+:root[data-theme='light'] .mermaid .external rect,
+:root[data-theme='light'] .mermaid .external polygon {
+  fill: #ffd6e8;
+  stroke: #bf3989;
+}
+:root[data-theme='light'] .mermaid .external text {
+  fill: #000000;
+}
+
 /* Hide glow effect on pages without hero */
 :root[data-theme='light'] body:not(:has(.hero))::before {
   display: none;