feat: configurable themes for mermaid

Author: zeon256

example/src/App.tsx

@@ -5,7 +5,11 @@ import {
   onCleanup,
   onMount,
 } from "solid-js";
-import { MarkdownRenderer, type Themes } from "solid-markdown-wasm";
+import {
+  DEFAULT_MERMAID_CONFIG,
+  MarkdownRenderer,
+  type Themes,
+} from "solid-markdown-wasm";
 import { MonacoEditor } from "solid-monaco";
 import haxiomLogo from "../src/assets/haxiom.svg";
 import initialMarkdown from "../src/assets/markdown_preview.md?raw";
@@ -153,6 +157,7 @@ const App: Component = () => {
   return (
     <div
       class="flex flex-col w-screen h-screen"
+      data-theme={isDarkMode() ? "dark" : "light"}
       classList={{ "bg-[#1e1e1e]": isDarkMode(), "bg-white": !isDarkMode() }}
     >
       {/* Toolbar */}
@@ -267,8 +272,7 @@ const App: Component = () => {
             href="https://haxiom.io"
             target="_blank"
             rel="noopener noreferrer"
-            class="text-sm font-medium px-3 py-1.5 rounded transition-colors text-black hover:opacity-80"
-            style={{ "background-color": "#6fffe9" }}
+            class="text-sm font-medium px-3 py-1.5 rounded transition-colors hover:opacity-80 bg-(--haxiom-accent-color) text-(--haxiom-fg-color)"
           >
             Try Haxiom
           </a>
@@ -302,6 +306,27 @@ const App: Component = () => {
               fallback={<LoadingFallback />}
               onLoaded={() => console.log("WASM Loaded")}
               immediateRenderMermaid={immediateMermaid()}
+              mermaidConfig={(theme) => {
+                const isDark = theme === "dark";
+                const textColor = isDark ? "#c9d1d9" : "#24292f";
+                const nodeBkg = isDark ? "#BB2528" : "#fee2e2"; // Dark red vs light red
+                const nodeText = isDark ? "#ffffff" : "#991b1b"; // White vs dark red
+
+                return {
+                  ...DEFAULT_MERMAID_CONFIG(theme),
+                  themeVariables: {
+                    ...DEFAULT_MERMAID_CONFIG(theme).themeVariables,
+                    primaryColor: nodeBkg,
+                    nodeBkg: nodeBkg,
+                    primaryTextColor: nodeText,
+                    nodeTextColor: nodeText,
+                    textColor: textColor,
+                    lineColor: "#FF0000",
+                    secondaryColor: "#006100",
+                    tertiaryColor: isDark ? "#222222" : "#eeeeee",
+                  },
+                };
+              }}
             />
           </div>
         </div>

example/src/assets/gantt_test.md

@@ -0,0 +1,13 @@
+# Gantt Chart Test
+
+```mermaid
+gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :after a1  , 20d
+    section Another
+    Task in sec      :2014-01-12  , 12d
+    another task      : 24d
+```

example/src/index.css

@@ -50,10 +50,15 @@
 }
 
 @media (prefers-color-scheme: dark) {
+  :root,
   .markdown-body,
   [data-theme="dark"] {
     /* dark */
     color-scheme: dark;
+    --haxiom-accent-color: rgb(111, 255, 233);
+    --haxiom-accent-color-hover: rgb(111, 255, 233);
+    --haxiom-accent-color-disabled: rgb(111, 255, 233);
+    --haxiom-fg-color: black;
     --focus-outlineColor: #1f6feb;
     --fgColor-default: #f0f6fc;
     --fgColor-muted: #9198a1;
@@ -108,10 +113,15 @@
 }
 
 @media (prefers-color-scheme: light) {
+  :root,
   .markdown-body,
   [data-theme="light"] {
     /* light */
     color-scheme: light;
+    --haxiom-accent-color: #4f46e5;
+    --haxiom-accent-color-hover: #4f46e5;
+    --haxiom-accent-color-disabled: #4f46e5;
+    --haxiom-fg-color: white;
     --focus-outlineColor: #0969da;
     --fgColor-default: #1f2328;
     --fgColor-muted: #59636e;
@@ -1580,6 +1590,8 @@
   background: transparent;
   border: none;
   padding: 1rem 0;
+  min-width: 600px;
+  overflow-x: auto;
 }
 
 .markdown-body pre:has(code.language-mermaid) svg,
@@ -1592,8 +1604,8 @@
 
 .mermaid-render-btn {
   padding: 0.5rem 1rem;
-  background: #6366f1;
-  color: white;
+  background: var(--haxiom-accent-color);
+  color: var(--haxiom-fg-color);
   border: none;
   border-radius: 4px;
   cursor: pointer;
@@ -1603,11 +1615,11 @@
 }
 
 .mermaid-render-btn:hover {
-  background: #4f46e5;
+  background: var(--haxiom-accent-color-hover);
 }
 
 .mermaid-render-btn:disabled {
-  background: #9ca3af;
+  background: var(--haxiom-accent-color-disabled);
   cursor: not-allowed;
 }
 
@@ -1632,18 +1644,13 @@
   }
 }
 
-.mermaid-clickable pre[data-mermaid-processed="true"] {
-  cursor: pointer;
-  transition: opacity 0.2s, background-color 0.2s;
+.mermaid-clickable .language-mermaid {
+  cursor: zoom-in;
+  transition: opacity 0.2s;
 }
 
-.mermaid-clickable pre[data-mermaid-processed="true"]:hover {
+.mermaid-clickable .language-mermaid:hover {
   opacity: 0.9;
-  background-color: var(--bgColor-neutral-muted, #818b981f);
-}
-
-.mermaid-clickable pre[data-mermaid-processed="true"] svg {
-  cursor: pointer;
 }
 
 .mermaid-preview-content svg {
@@ -1691,3 +1698,7 @@
   cursor: pointer;
   padding: 10px;
 }
+
+.mermaid-preview-overlay .mermaid-preview-content svg {
+  background-color: var(--bgColor-default);
+}

src/components/MarkdownRenderer.tsx

@@ -17,7 +17,10 @@ import {
   onMount,
 } from "solid-js";
 import { render } from "solid-js/web";
-import { useMermaidRenderer } from "../utils/useMermaidRenderer";
+import {
+  type MermaidConfigFn,
+  useMermaidRenderer,
+} from "../utils/useMermaidRenderer";
 
 export type { Themes } from "markdown-renderer";
 
@@ -105,6 +108,7 @@ export interface MarkdownRendererProps {
   fallback?: JSX.Element;
   onLoaded?: () => void;
   immediateRenderMermaid?: boolean;
+  mermaidConfig?: MermaidConfigFn;
 }
 
 export const MarkdownRenderer: Component<MarkdownRendererProps> = (props) => {
@@ -116,6 +120,7 @@ export const MarkdownRenderer: Component<MarkdownRendererProps> = (props) => {
   // Initialize Mermaid renderer
   const { processBlocks, renderMermaid } = useMermaidRenderer(
     props.immediateRenderMermaid ?? false,
+    props.mermaidConfig,
   );
 
   // Store iframe data: element, wrapper, source, and dimensions
@@ -497,7 +502,11 @@ export const MarkdownRenderer: Component<MarkdownRendererProps> = (props) => {
         injectCopyButtons();
 
         // Process Mermaid diagrams
-        processBlocks(contentRef);
+        processBlocks(
+          contentRef,
+          props.immediateRenderMermaid ?? false,
+          props.mermaidConfig,
+        );
 
         // Observe content for size changes
         if (resizeObserver && contentRef) {

src/index.ts

@@ -1,4 +1,8 @@
 export { MarkdownRenderer } from "./components/MarkdownRenderer";
 export type { MarkdownRendererProps } from "./components/MarkdownRenderer";
-export { useMermaidRenderer } from "./utils/useMermaidRenderer";
+export {
+  useMermaidRenderer,
+  DEFAULT_MERMAID_CONFIG,
+  type MermaidConfigFn,
+} from "./utils/useMermaidRenderer";
 export type { Themes } from "markdown-renderer";