From 32c7ecd9cfacc4f52dad00536af669097b0cfd93 Mon Sep 17 00:00:00 2001 From: Alexander Schaber Date: Fri, 25 Jul 2025 01:22:27 +0200 Subject: [PATCH] feat: set mermaid theme based on computed color scheme (#1397) Use Mantine's `useComputedColorScheme` hook to dynamically configure mermaid's theme. - When the computed color scheme is "light", the theme is set to "default". - Otherwise, it is set to "dark". --- .../features/editor/components/code-block/mermaid-view.tsx | 4 ++++ 1 file changed, 4 insertions(+) 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 {