fix: mermaid diagrams in dark mode (#4289)

* fix #4257 fixed ui for mermaid diagrams in dark mode

* fixed linting issues

* added dynamic color theme for mermaid diagrams

* now mermaid block uses theme according to the system as well when 'follow system' is selected

* refactored code for mermaid theme logic

* refactored mermaid code to use const instead of function call

---------

Co-authored-by: root <root@DESKTOP-G3MCU14>

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],