diff --git a/web/src/components/MemoContent/MermaidBlock.tsx b/web/src/components/MemoContent/MermaidBlock.tsx
index bf558fa8..064d4608 100644
--- a/web/src/components/MemoContent/MermaidBlock.tsx
+++ b/web/src/components/MemoContent/MermaidBlock.tsx
@@ -1,3 +1,4 @@
+import { useColorScheme } from "@mui/joy";
 import { useEffect, useRef } from "react";
 
 interface Props {
@@ -6,12 +7,15 @@ interface Props {
 
 const MermaidBlock: React.FC<Props> = ({ content }: Props) => {
   const mermaidDockBlock = useRef<null>(null);
+  const { mode } = useColorScheme();
+
+  const mermaidTheme = mode == "dark" ? "dark" : "default";
 
   useEffect(() => {
     // Dynamically import mermaid to ensure compatibility with Vite
     const initializeMermaid = async () => {
       const mermaid = (await import("mermaid")).default;
-      mermaid.initialize({ startOnLoad: false, theme: "default" });
+      mermaid.initialize({ startOnLoad: false, theme: mermaidTheme });
       if (mermaidDockBlock.current) {
         mermaid.run({
           nodes: [mermaidDockBlock.current],