From 242fb6bb572fa0d400f254687caa145f44b44b70 Mon Sep 17 00:00:00 2001
From: Alexander Schaber <a.schaber@cuegee.com>
Date: Sun, 31 Aug 2025 21:48:59 +0200
Subject: [PATCH] fix: set mermaid theme based on computed color scheme (#1438)

---
 .../components/code-block/mermaid-view.tsx    | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/features/editor/components/code-block/mermaid-view.tsx b/apps/client/src/features/editor/components/code-block/mermaid-view.tsx
index 5f2cf845..e871e2f4 100644
--- a/apps/client/src/features/editor/components/code-block/mermaid-view.tsx
+++ b/apps/client/src/features/editor/components/code-block/mermaid-view.tsx
@@ -4,11 +4,7 @@ import mermaid from "mermaid";
 import { v4 as uuidv4 } from "uuid";
 import classes from "./code-block.module.css";
 import { useTranslation } from "react-i18next";
-
-mermaid.initialize({
-  startOnLoad: false,
-  suppressErrorRendering: true,
-});
+import { useComputedColorScheme } from "@mantine/core";
 
 interface MermaidViewProps {
   props: NodeViewProps;
@@ -16,12 +12,22 @@ interface MermaidViewProps {
 
 export default function MermaidView({ props }: MermaidViewProps) {
   const { t } = useTranslation();
+  const computedColorScheme = useComputedColorScheme();
   const { node } = props;
   const [preview, setPreview] = useState<string>("");
 
+  // Update Mermaid config when theme changes.
+  useEffect(() => {
+    mermaid.initialize({
+      startOnLoad: false,
+      suppressErrorRendering: true,
+      theme: computedColorScheme === "light" ? "default" : "dark",
+    });
+  }, [computedColorScheme]);
+
+  // Re-render the diagram whenever the node content or theme changes.
   useEffect(() => {
     const id = `mermaid-${uuidv4()}`;
-
     if (node.textContent.length > 0) {
       mermaid
         .render(id, node.textContent)
@@ -40,7 +46,7 @@ export default function MermaidView({ props }: MermaidViewProps) {
           }
         });
     }
-  }, [node.textContent]);
+  }, [node.textContent, computedColorScheme]);
 
   return (
     <div