AcadeNice/AcadeDoc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: set mermaid theme based on computed color scheme (#1397)

Browse source 
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".
This commit is contained in:
Alexander Schaber 2025-07-25 01:22:27 +02:00 • committed by GitHub
parent b30bf61dc4
commit 32c7ecd9cf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 4 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/client/src/features/editor/components/code-block/mermaid-view.tsx
View file

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