last fixes for mermaid dark mode

README.md

@@ -66,8 +66,6 @@ Ideas for other diagrams: https://stereobooster.com/posts/text-to-diagram/.
 
 ## TODO
 
-- [ ] implement dark mode for mermaid with picture/classes
-- [ ] SVGO?
 - [ ] fix `@beoe/astro-graphviz`
   - why I can't use `@beoe/cache` package?
 - [ ] example of gnuplot custom diagram

packages/demo/astro.config.mjs

@@ -32,10 +32,7 @@ export default defineConfig({
   markdown: {
     rehypePlugins: [
       [rehypeGraphviz, { class: className }],
-      [
-        rehypeMermaid,
-        { cache, class: className, strategy: "class-dark-mode" },
-      ],
+      [rehypeMermaid, { cache, class: className, strategy: "class-dark-mode" }],
       [rehypeGnuplot, { cache, class: className }],
     ],
   },

packages/demo/src/components/svgpanzoom.ts

@@ -1,7 +1,35 @@
 import "./SvgPanZoomUi.css";
 import { SvgPanZoomUi } from "svg-pan-zoom-gesture";
 
+// @ts-expect-error
+const theme = document.querySelector("html")!.attributes["data-theme"]?.value;
+
+const themeSelector = document.querySelector(
+  "starlight-theme-select select"
+) as HTMLSelectElement;
+
 document.querySelectorAll(".beoe").forEach((container) => {
+  const svg = container.querySelector("svg");
+  const img = container.querySelector(`img.beoe-${theme.toString()}`);
+  if (!svg && !img) return;
+
   // @ts-expect-error
-  new SvgPanZoomUi({ element: container.querySelector("svg"), container }).on();
+  let instance = new SvgPanZoomUi({ element: svg || img, container });
+  instance.on();
+
+  // workaround for selector based dark mode - when there are 2 images. I don't like it
+  // maybe allow to pass array to element?
+  // TODO: `off()` needs to reset zoom level
+  if (img && themeSelector) {
+    themeSelector.addEventListener("change", () => {
+      instance.off();
+      const theme =
+        // @ts-expect-error
+        document.querySelector("html")!.attributes["data-theme"]?.value;
+      const img = container.querySelector(`img.beoe-${theme.toString()}`);
+      // @ts-expect-error
+      instance = new SvgPanZoomUi({ element: img, container });
+      instance.on();
+    });
+  }
 });

packages/demo/src/content/docs/examples/mermaid.md

@@ -93,8 +93,6 @@ classDiagram
     }
 ```
 
-**TODO**: this doesn't work with dark mode
-
 ```mermaid
 ---
 title: Simple sample
@@ -201,8 +199,6 @@ gitGraph
    commit
 ```
 
-**TODO**: this doesn't work with dark mode
-
 ```mermaid
 C4Context
     title System Context diagram for Internet Banking System

packages/demo/src/styles/custom.css

@@ -18,10 +18,21 @@
   }
 }
 
+/* needed if you use strategy: "inline" */
+.mermaid svg {
+  background: #fff;
+  line-height: 1;
+}
+
+/* needed if you use strategy: "class-dark-mode" */
 html[data-theme="light"] .beoe-dark {
   display: none;
 }
 
 html[data-theme="dark"] .beoe-light {
   display: none;
 }
+
+/* .beoe {
+  @apply not-content;
+} */

packages/rehype-mermaid/README.md

@@ -47,6 +47,7 @@ It support caching the same way as [@beoe/rehype-code-hook](/packages/rehype-cod
 
 ## TODO
 
+- write about dark mode
 - maybe use `waitFor`
 - maybe remove `style="max-width: ..."`
 - test `mermaid-isomorphic` options (`css, mermaidConfig, prefix, browser, launchOptions`)

packages/rehype-mermaid/src/index.ts

@@ -8,14 +8,18 @@ import {
   type RenderResult,
 } from "mermaid-isomorphic";
 import svgToMiniDataURI from "mini-svg-data-uri";
-import { optimize, type Config as SvgoConfig } from "svgo";
 import { h } from "hastscript";
+// SVGO is an experiment. I'm not sure it can compress a lot, plus it can break some diagrams
+import { optimize, type Config as SvgoConfig } from "svgo";
 
 export type RehypeMermaidConfig = RenderOptions &
   CreateMermaidRendererOptions & {
     cache?: MapLike;
     class?: string;
-    svgo?: SvgoConfig | false;
+    /**
+     * be carefull. It may break some diagrams. For example, stateDiagram-v2
+     */
+    svgo?: SvgoConfig | boolean;
     strategy?: "inline" | "picture" | "class-dark-mode";
   };
 
@@ -102,17 +106,14 @@ export const rehypeMermaid: Plugin<[RehypeMermaidConfig?], Root> = (
     // otherwise all diagrams would have same ID and styles would collide
     config.prefix = `m${Math.random().toString().replace(".", "")}`;
 
-    if (dark) {
-      // config.mermaidConfig.darkMode = true;
-      config.mermaidConfig.theme = "dark";
-    }
+    if (dark) config.mermaidConfig.theme = "dark";
 
     const [x] = await renderDiagrams([code], config);
 
     if (x.status === "fulfilled") {
-      if (svgo !== false) {
-        x.value.svg = optimize(x.value.svg, svgo).data;
-      }
+      if (svgo)
+        x.value.svg = optimize(x.value.svg, svgo === true ? {} : svgo).data;
+
       return x.value;
     } else {
       throw new Error(x.reason);