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..d51e5604 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,10 +4,14 @@ import mermaid from "mermaid";
 import { v4 as uuidv4 } from "uuid";
 import classes from "./code-block.module.css";
 import { useTranslation } from "react-i18next";
+import { useComputedColorScheme } from "@mantine/core";
+
+const computedColorScheme = useComputedColorScheme();
 
 mermaid.initialize({
   startOnLoad: false,
   suppressErrorRendering: true,
+  theme: computedColorScheme === "light" ? "default" : "dark",
 });
 
 interface MermaidViewProps {