Add automatic mermaid theme switching for dark mode #1099

Copilot · 2025-11-11T23:52:15Z

Implementation Complete: Automatic Mermaid Dark Theme Support

Summary

This implementation solves the issue where mermaid diagrams were unreadable in dark theme. Diagrams now automatically switch between light and dark themes as users toggle the site theme.

Bug Fix Applied

Fixed critical bug where mermaid was trying to re-render already processed SVG/HTML content. The fix ensures original diagram content is stored BEFORE the first render, not after.

Changes:

Added storeOriginalContent() function to capture original diagram text before rendering
Call storeOriginalContent() before initializeMermaid() on page load
Simplified theme change handler to only restore and re-render

How It Works

On page load: Store original diagram content → Render with current theme
On theme change: Restore original content → Re-render with new theme
Original content is preserved via data-original-content attribute

Testing

✅ Linting passed with no errors
✅ CodeQL security scan passed with no vulnerabilities
✅ Backward compatible - existing configurations work without changes

Original prompt

This section details on the original issue you should resolve

<issue_title>Set mermaid dark theme automatically</issue_title>
<issue_description>

This theme has mermaid support. As we can check in the toha guide's mermaid post, when setting the site theme to dark, graphs are unreadable.

Describe the solution you'd like

The solution that I thought would be to set up the following:

For site light theme: Use default mermaid theme

For site dark theme: Use dark mermaid theme

Of course, there should be the option to override them.

Globally:
flowchart:
      enable: true
      services:
        # Uncomment for `mermaid` shortcode.
        mermaid:
          # For config options, see: https://mermaid-js.github.io/mermaid/#/Setup?id=configuration
          theme: default
          darkTheme: dark
Per graph:
{{< mermaid align="center" >}}
%%{init: {'theme':'default', 'darkTheme':'dark'}}%%
  # your mermaid content here
{{< /mermaid >}}
```</issue_description>

## Comments on the Issue (you are @copilot in this section)

<comments>
</comments>

Fixes Set mermaid dark theme automatically #1042

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

netlify · 2025-11-11T23:52:21Z

✅ Deploy Preview for toha-ci ready!

Name	Link
🔨 Latest commit	`50aae44`
🔍 Latest deploy log	https://app.netlify.com/projects/toha-ci/deploys/6913eb77589ce50008df1afc
😎 Deploy Preview	https://deploy-preview-1099--toha-ci.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Co-authored-by: hossainemruz <[email protected]>

github-actions

Device	URL
desktop	https://6913e1e80228130008e79c84--toha-ci.netlify.app

Device	URL
mobile	https://6913e1e80228130008e79c84--toha-ci.netlify.app

Device	URL
desktop	https://6913e1e80228130008e79c84--toha-ci.netlify.app/posts/

Device	URL
mobile	https://6913e1e80228130008e79c84--toha-ci.netlify.app/posts/

Device	URL
desktop	https://6913e1e80228130008e79c84--toha-ci.netlify.app/posts/markdown-sample/

Device	URL
mobile	https://6913e1e80228130008e79c84--toha-ci.netlify.app/posts/markdown-sample/

Device	URL
desktop	https://6913e1e80228130008e79c84--toha-ci.netlify.app/posts/shortcodes/

Device	URL
mobile	https://6913e1e80228130008e79c84--toha-ci.netlify.app/posts/shortcodes/

Not what you expected? Are your scores flaky? GitHub runners could be the cause.
Try running on Foo instead

hossainemruz · 2025-11-12T01:42:49Z

@copilot After this change, if I enable the mermaid suppot by flowchart.enable: true. It does not render toha-example-site properly. It shows this error in the console.

Uncaught (in promise) 
Object { str: 'No diagram type detected matching given configuration for text: #mermaid-1762911527711{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-1762911527711 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-1762911527711 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-1762911527711 .error-icon{fill:#a44141;}#mermaid-1762911527711 .error-text{fill:#ddd;stroke:#ddd;}#mermaid-1762911527711 .edge-thickness-normal{stroke-width:1px;}#mermaid-1762911527711 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1762911527711 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1762911527711 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-1762911527711 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1762911527711 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1762911527711 .marker{fill:lightgrey;stroke:lightgrey;}#mermaid-1762911527711 .marker.cross{stroke:lightgrey;}#mermaid-1762911527711 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1762911527711 p{margin:0;}#mermaid-1762911527711 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#ccc;}#mermaid-1762911527711 .cluster-label text{fill:#F9FFFE;}#mermaid-1762911527711 .cluster-label span{color:#F9FFFE;}#mermaid-1762911527711 .cluster-label span p{background-color:transparent;}#mermaid-1762911527711 .label text,#mermaid-1762911527711 span{fill:#ccc;color:#ccc;}#mermaid-1762911527711 .node rect,#mermaid-1762911527711 .node circle,#mermaid-1762911527711 .node ellipse,#mermaid-1762911527711 .node polygon,#mermaid-1762911527711 .node path{fill:#1f2020;stroke:#ccc;stroke-width:1px;}#mermaid-1762911527711 .rough-node .label text,#mermaid-1762911527711 .node .label text,#mermaid-1762911527711 .image-shape .label,#mermaid-1762911527711 .icon-shape .label{text-anchor:middle;}#mermaid-1762911527711 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-1762911527711 .rough-node .label,#mermaid-1762911527711 .node .label,#mermaid-1762911527711 .image-shape .label,#mermaid-1762911527711 .icon-shape .label{text-align:center;}#mermaid-1762911527711 .node.clickable{cursor:pointer;}#mermaid-1762911527711 .root .anchor path{fill:lightgrey!important;stroke-width:0;stroke:lightgrey;}#mermaid-1762911527711 .arrowheadPath{fill:lightgrey;}#mermaid-1762911527711 .edgePath .path{stroke:lightgrey;stroke-width:2.0px;}#mermaid-1762911527711 .flowchart-link{stroke:lightgrey;fill:none;}#mermaid-1762911527711 .edgeLabel{background-color:hsl(0, 0%, 34.4117647059%);text-align:center;}#mermaid-1762911527711 .edgeLabel p{background-color:hsl(0, 0%, 34.4117647059%);}#mermaid-1762911527711 .edgeLabel rect{opacity:0.5;background-color:hsl(0, 0%, 34.4117647059%);fill:hsl(0, 0%, 34.4117647059%);}#mermaid-1762911527711 .labelBkg{background-color:rgba(87.75, 87.75, 87.75, 0.5);}#mermaid-1762911527711 .cluster rect{fill:hsl(180, 1.5873015873%, 28.3529411765%);stroke:rgba(255, 255, 255, 0.25);stroke-width:1px;}#mermaid-1762911527711 .cluster text{fill:#F9FFFE;}#mermaid-1762911527711 .cluster span{color:#F9FFFE;}#mermaid-1762911527711 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(20, 1.5873015873%, 12.3529411765%);border:1px solid rgba(255, 255, 255, 0.25);border-radius:2px;pointer-events:none;z-index:100;}#mermaid-1762911527711 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#ccc;}#mermaid-1762911527711 rect.text{fill:none;stroke-width:0;}#mermaid-1762911527711 .icon-shape,#mermaid-1762911527711 .image-shape{background-color:hsl(0, 0%, 34.4117647059%);text-align:center;}#mermaid-1762911527711 .icon-shape p,#mermaid-1762911527711 .image-shape p{background-color:hsl(0, 0%, 34.4117647059%);padding:2px;}#mermaid-1762911527711 .icon-shape rect,#mermaid-1762911527711 .image-shape rect{opacity:0.5;background-color:hsl(0, 0%, 34.4117647059%);fill:hsl(0, 0%, 34.4117647059%);}#mermaid-1762911527711 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-1762911527711 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-1762911527711 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}Link textOneTwoHard edgeRound edgeDecisionResult oneResult two', message: 'No diagram type detected matching given configuration for text: #mermaid-1762911527711{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-1762911527711 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-1762911527711 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-1762911527711 .error-icon{fill:#a44141;}#mermaid-1762911527711 .error-text{fill:#ddd;stroke:#ddd;}#mermaid-1762911527711 .edge-thickness-normal{stroke-width:1px;}#mermaid-1762911527711 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1762911527711 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1762911527711 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-1762911527711 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1762911527711 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1762911527711 .marker{fill:lightgrey;stroke:lightgrey;}#mermaid-1762911527711 .marker.cross{stroke:lightgrey;}#mermaid-1762911527711 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1762911527711 p{margin:0;}#mermaid-1762911527711 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#ccc;}#mermaid-1762911527711 .cluster-label text{fill:#F9FFFE;}#mermaid-1762911527711 .cluster-label span{color:#F9FFFE;}#mermaid-1762911527711 .cluster-label span p{background-color:transparent;}#mermaid-1762911527711 .label text,#mermaid-1762911527711 span{fill:#ccc;color:#ccc;}#mermaid-1762911527711 .node rect,#mermaid-1762911527711 .node circle,#mermaid-1762911527711 .node ellipse,#mermaid-1762911527711 .node polygon,#mermaid-1762911527711 .node path{fill:#1f2020;stroke:#ccc;stroke-width:1px;}#mermaid-1762911527711 .rough-node .label text,#mermaid-1762911527711 .node .label text,#mermaid-1762911527711 .image-shape .label,#mermaid-1762911527711 .icon-shape .label{text-anchor:middle;}#mermaid-1762911527711 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-1762911527711 .rough-node .label,#mermaid-1762911527711 .node .label,#mermaid-1762911527711 .image-shape .label,#mermaid-1762911527711 .icon-shape .label{text-align:center;}#mermaid-1762911527711 .node.clickable{cursor:pointer;}#mermaid-1762911527711 .root .anchor path{fill:lightgrey!important;stroke-width:0;stroke:lightgrey;}#mermaid-1762911527711 .arrowheadPath{fill:lightgrey;}#mermaid-1762911527711 .edgePath .path{stroke:lightgrey;stroke-width:2.0px;}#mermaid-1762911527711 .flowchart-link{stroke:lightgrey;fill:none;}#mermaid-1762911527711 .edgeLabel{background-color:hsl(0, 0%, 34.4117647059%);text-align:center;}#mermaid-1762911527711 .edgeLabel p{background-color:hsl(0, 0%, 34.4117647059%);}#mermaid-1762911527711 .edgeLabel rect{opacity:0.5;background-color:hsl(0, 0%, 34.4117647059%);fill:hsl(0, 0%, 34.4117647059%);}#mermaid-1762911527711 .labelBkg{background-color:rgba(87.75, 87.75, 87.75, 0.5);}#mermaid-1762911527711 .cluster rect{fill:hsl(180, 1.5873015873%, 28.3529411765%);stroke:rgba(255, 255, 255, 0.25);stroke-width:1px;}#mermaid-1762911527711 .cluster text{fill:#F9FFFE;}#mermaid-1762911527711 .cluster span{color:#F9FFFE;}#mermaid-1762911527711 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(20, 1.5873015873%, 12.3529411765%);border:1px solid rgba(255, 255, 255, 0.25);border-radius:2px;pointer-events:none;z-index:100;}#mermaid-1762911527711 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#ccc;}#mermaid-1762911527711 rect.text{fill:none;stroke-width:0;}#mermaid-1762911527711 .icon-shape,#mermaid-1762911527711 .image-shape{background-color:hsl(0, 0%, 34.4117647059%);text-align:center;}#mermaid-1762911527711 .icon-shape p,#mermaid-1762911527711 .image-shape p{background-color:hsl(0, 0%, 34.4117647059%);padding:2px;}#mermaid-1762911527711 .icon-shape rect,#mermaid-1762911527711 .image-shape rect{opacity:0.5;background-color:hsl(0, 0%, 34.4117647059%);fill:hsl(0, 0%, 34.4117647059%);}#mermaid-1762911527711 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-1762911527711 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-1762911527711 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}Link textOneTwoHard edgeRound edgeDecisionResult oneResult two', hash: "UnknownDiagramError", error: UnknownDiagramError }

error: UnknownDiagramError: No diagram type detected matching given configuration for text: #mermaid-1762911527711{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-1762911527711 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-1762911527711 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-1762911527711 .error-icon{fill:#a44141;}#mermaid-1762911527711 .error-text{fill:#ddd;stroke:#ddd;}#mermaid-1762911527711 .edge-thickness-normal{stroke-width:1px;}#mermaid-1762911527711 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1762911527711 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1762911527711 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-1762911527711 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1762911527711 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1762911527711 .marker{fill:lightgrey;stroke:lightgrey;}#mermaid-1762911527711 .marker.cross{stroke:lightgrey;}#mermaid-1762911527711 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1762911527711 p{margin:0;}#mermaid-1762911527711 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#ccc;}#mermaid-1762911527711 .cluster-label text{fill:#F9FFFE;}#mermaid-1762911527711 .cluster-label span{color:#F9FFFE;}#mermaid-1762911527711 .cluster-label span p{background-color:transparent;}#mermaid-1762911527711 .label text,#mermaid-1762911527711 span{fill:#ccc;color:#ccc;}#mermaid-1762911527711 .node rect,#mermaid-1762911527711 .node circle,#mermaid-1762911527711 .node ellipse,#mermaid-1762911527711 .node polygon,#mermaid-1762911527711 .node path{fill:#1f2020;stroke:#ccc;stroke-width:1px;}#mermaid-1762911527711 .rough-node .label text,#mermaid-1762911527711 .node .label text,#mermaid-1762911527711 .image-shape .label,#mermaid-1762911527711 .icon-shape .label{text-anchor:middle;}#mermaid-1762911527711 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-1762911527711 .rough-node .label,#mermaid-1762911527711 .node .label,#mermaid-1762911527711 .image-shape .label,#mermaid-1762911527711 .icon-shape .label{text-align:center;}#mermaid-1762911527711 .node.clickable{cursor:pointer;}#mermaid-1762911527711 .root .anchor path{fill:lightgrey!important;stroke-width:0;stroke:lightgrey;}#mermaid-1762911527711 .arrowheadPath{fill:lightgrey;}#mermaid-1762911527711 .edgePath .path{stroke:lightgrey;stroke-width:2.0px;}#mermaid-1762911527711 .flowchart-link{stroke:lightgrey;fill:none;}#mermaid-1762911527711 .edgeLabel{background-color:hsl(0, 0%, 34.4117647059%);text-align:center;}#mermaid-1762911527711 .edgeLabel p{background-color:hsl(0, 0%, 34.4117647059%);}#mermaid-1762911527711 .edgeLabel rect{opacity:0.5;background-color:hsl(0, 0%, 34.4117647059%);fill:hsl(0, 0%, 34.4117647059%);}#mermaid-1762911527711 .labelBkg{background-color:rgba(87.75, 87.75, 87.75, 0.5);}#mermaid-1762911527711 .cluster rect{fill:hsl(180, 1.5873015873%, 28.3529411765%);stroke:rgba(255, 255, 255, 0.25);stroke-width:1px;}#mermaid-1762911527711 .cluster text{fill:#F9FFFE;}#mermaid-1762911527711 .cluster span{color:#F9FFFE;}#mermaid-1762911527711 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(20, 1.5873015873%, 12.3529411765%);border:1px solid rgba(255, 255, 255, 0.25);border-radius:2px;pointer-events:none;z-index:100;}#mermaid-1762911527711 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#ccc;}#mermaid-1762911527711 rect.text{fill:none;stroke-width:0;}#mermaid-1762911527711 .icon-shape,#mermaid-1762911527711 .image-shape{background-color:hsl(0, 0%, 34.4117647059%);text-align:center;}#mermaid-1762911527711 .icon-shape p,#mermaid-1762911527711 .image-shape p{background-color:hsl(0, 0%, 34.4117647059%);padding:2px;}#mermaid-1762911527711 .icon-shape rect,#mermaid-1762911527711 .image-shape rect{opacity:0.5;background-color:hsl(0, 0%, 34.4117647059%);fill:hsl(0, 0%, 34.4117647059%);}#mermaid-1762911527711 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-1762911527711 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-1762911527711 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}Link textOneTwoHard edgeRound edgeDecisionResult oneResult two

hash: "UnknownDiagramError"

message: 'No diagram type detected matching given configuration for text: #mermaid-1762911527711{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-1762911527711 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-1762911527711 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-1762911527711 .error-icon{fill:#a44141;}#mermaid-1762911527711 .error-text{fill:#ddd;stroke:#ddd;}#mermaid-1762911527711 .edge-thickness-normal{stroke-width:1px;}#mermaid-1762911527711 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1762911527711 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1762911527711 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-1762911527711 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1762911527711 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1762911527711 .marker{fill:lightgrey;stroke:lightgrey;}#mermaid-1762911527711 .marker.cross{stroke:lightgrey;}#mermaid-1762911527711 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1762911527711 p{margin:0;}#mermaid-1762911527711 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#ccc;}#mermaid-1762911527711 .cluster-label text{fill:#F9FFFE;}#mermaid-1762911527711 .cluster-label span{color:#F9FFFE;}#mermaid-1762911527711 .cluster-label span p{background-color:transparent;}#mermaid-1762911527711 .label text,#mermaid-1762911527711 span{fill:#ccc;color:#ccc;}#mermaid-1762911527711 .node rect,#mermaid-1762911527711 .node circle,#mermaid-1762911527711 .node ellipse,#mermaid-1762911527711 .node polygon,#mermaid-1762911527711 .node path{fill:#1f2020;stroke:#ccc;stroke-width:1px;}#mermaid-1762911527711 .rough-node .label text,#mermaid-1762911527711 .node .label text,#mermaid-1762911527711 .image-shape .label,#mermaid-1762911527711 .icon-shape .label{text-anchor:middle;}#mermaid-1762911527711 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-1762911527711 .rough-node .label,#mermaid-1762911527711 .node .label,#mermaid-1762911527711 .image-shape .label,#mermaid-1762911527711 .icon-shape .label{text-align:center;}#mermaid-1762911527711 .node.clickable{cursor:pointer;}#mermaid-1762911527711 .root .anchor path{fill:lightgrey!important;stroke-width:0;stroke:lightgrey;}#mermaid-1762911527711 .arrowheadPath{fill:lightgrey;}#mermaid-1762911527711 .edgePath .path{stroke:lightgrey;stroke-width:2.0px;}#mermaid-1762911527711 .flowchart-link{stroke:lightgrey;fill:none;}#mermaid-1762911527711 .edgeLabel{background-color:hsl(0, 0%, 34.4117647059%);text-align:center;}#mermaid-1762911527711 .edgeLabel p{background-color:hsl(0, 0%, 34.4117647059%);}#mermaid-1762911527711 .edgeLabel rect{opacity:0.5;background-color:hsl(0, 0%, 34.4117647059%);fill:hsl(0, 0%, 34.4117647059%);}#mermaid-1762911527711 .labelBkg{background-color:rgba(87.75, 87.75, 87.75, 0.5);}#mermaid-1762911527711 .cluster rect{fill:hsl(180, 1.5873015873%, 28.3529411765%);stroke:rgba(255, 255, 255, 0.25);stroke-width:1px;}#mermaid-1762911527711 .cluster text{fill:#F9FFFE;}#mermaid-1762911527711 .cluster span{color:#F9FFFE;}#mermaid-1762911527711 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(20, 1.5873015873%, 12.3529411765%);border:1px solid rgba(255, 255, 255, 0.25);border-radius:2px;pointer-events:none;z-index:100;}#mermaid-1762911527711 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#ccc;}#mermaid-1762911527711 rect.text{fill:none;stroke-width:0;}#mermaid-1762911527711 .icon-shape,#mermaid-1762911527711 .image-shape{background-color:hsl(0, 0%, 34.4117647059%);text-align:center;}#mermaid-1762911527711 .icon-shape p,#mermaid-1762911527711 .image-shape p{background-color:hsl(0, 0%, 34.4117647059%);padding:2px;}#mermaid-1762911527711 .icon-shape rect,#mermaid-1762911527711 .image-shape rect{opacity:0.5;background-color:hsl(0, 0%, 34.4117647059%);fill:hsl(0, 0%, 34.4117647059%);}#mermaid-1762911527711 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-1762911527711 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-1762911527711 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}Link textOneTwoHard edgeRound edgeDecisionResult oneResult two'

str: 'No diagram type detected matching given configuration for text: #mermaid-1762911527711{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-1762911527711 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-1762911527711 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-1762911527711 .error-icon{fill:#a44141;}#mermaid-1762911527711 .error-text{fill:#ddd;stroke:#ddd;}#mermaid-1762911527711 .edge-thickness-normal{stroke-width:1px;}#mermaid-1762911527711 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1762911527711 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1762911527711 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-1762911527711 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1762911527711 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1762911527711 .marker{fill:lightgrey;stroke:lightgrey;}#mermaid-1762911527711 .marker.cross{stroke:lightgrey;}#mermaid-1762911527711 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1762911527711 p{margin:0;}#mermaid-1762911527711 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#ccc;}#mermaid-1762911527711 .cluster-label text{fill:#F9FFFE;}#mermaid-1762911527711 .cluster-label span{color:#F9FFFE;}#mermaid-1762911527711 .cluster-label span p{background-color:transparent;}#mermaid-1762911527711 .label text,#mermaid-1762911527711 span{fill:#ccc;color:#ccc;}#mermaid-1762911527711 .node rect,#mermaid-1762911527711 .node circle,#mermaid-1762911527711 .node ellipse,#mermaid-1762911527711 .node polygon,#mermaid-1762911527711 .node path{fill:#1f2020;stroke:#ccc;stroke-width:1px;}#mermaid-1762911527711 .rough-node .label text,#mermaid-1762911527711 .node .label text,#mermaid-1762911527711 .image-shape .label,#mermaid-1762911527711 .icon-shape .label{text-anchor:middle;}#mermaid-1762911527711 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-1762911527711 .rough-node .label,#mermaid-1762911527711 .node .label,#mermaid-1762911527711 .image-shape .label,#mermaid-1762911527711 .icon-shape .label{text-align:center;}#mermaid-1762911527711 .node.clickable{cursor:pointer;}#mermaid-1762911527711 .root .anchor path{fill:lightgrey!important;stroke-width:0;stroke:lightgrey;}#mermaid-1762911527711 .arrowheadPath{fill:lightgrey;}#mermaid-1762911527711 .edgePath .path{stroke:lightgrey;stroke-width:2.0px;}#mermaid-1762911527711 .flowchart-link{stroke:lightgrey;fill:none;}#mermaid-1762911527711 .edgeLabel{background-color:hsl(0, 0%, 34.4117647059%);text-align:center;}#mermaid-1762911527711 .edgeLabel p{background-color:hsl(0, 0%, 34.4117647059%);}#mermaid-1762911527711 .edgeLabel rect{opacity:0.5;background-color:hsl(0, 0%, 34.4117647059%);fill:hsl(0, 0%, 34.4117647059%);}#mermaid-1762911527711 .labelBkg{background-color:rgba(87.75, 87.75, 87.75, 0.5);}#mermaid-1762911527711 .cluster rect{fill:hsl(180, 1.5873015873%, 28.3529411765%);stroke:rgba(255, 255, 255, 0.25);stroke-width:1px;}#mermaid-1762911527711 .cluster text{fill:#F9FFFE;}#mermaid-1762911527711 .cluster span{color:#F9FFFE;}#mermaid-1762911527711 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(20, 1.5873015873%, 12.3529411765%);border:1px solid rgba(255, 255, 255, 0.25);border-radius:2px;pointer-events:none;z-index:100;}#mermaid-1762911527711 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#ccc;}#mermaid-1762911527711 rect.text{fill:none;stroke-width:0;}#mermaid-1762911527711 .icon-shape,#mermaid-1762911527711 .image-shape{background-color:hsl(0, 0%, 34.4117647059%);text-align:center;}#mermaid-1762911527711 .icon-shape p,#mermaid-1762911527711 .image-shape p{background-color:hsl(0, 0%, 34.4117647059%);padding:2px;}#mermaid-1762911527711 .icon-shape rect,#mermaid-1762911527711 .image-shape rect{opacity:0.5;background-color:hsl(0, 0%, 34.4117647059%);fill:hsl(0, 0%, 34.4117647059%);}#mermaid-1762911527711 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-1762911527711 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-1762911527711 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}Link textOneTwoHard edgeRound edgeDecisionResult oneResult two'

<prototype>: Object { … }
mermaid.core.mjs:1170:13

You can re-produce by following this setps:

Enable mermaid support in hugo.yaml file

params:
  features:
     flowchart:
         enable: true

Run the example site with mise run example-site. Make sure to install the dependencies using mise install

…nder Co-authored-by: hossainemruz <[email protected]>

Copilot · 2025-11-12T01:46:55Z

@copilot After this change, if I enable the mermaid suppot by flowchart.enable: true. It does not render toha-example-site properly. It shows this error in the console.
Uncaught (in promise) ...

Fixed in commit 5d0c60f. The issue was that original diagram content was being stored after mermaid had already rendered it, causing re-renders to fail. Now the original content is stored before the first render, allowing theme changes to work correctly.

github-actions

Device	URL
desktop	https://6913eb77589ce50008df1afc--toha-ci.netlify.app

Device	URL
mobile	https://6913eb77589ce50008df1afc--toha-ci.netlify.app

Device	URL
desktop	https://6913eb77589ce50008df1afc--toha-ci.netlify.app/posts/

Device	URL
mobile	https://6913eb77589ce50008df1afc--toha-ci.netlify.app/posts/

Device	URL
desktop	https://6913eb77589ce50008df1afc--toha-ci.netlify.app/posts/markdown-sample/

Device	URL
mobile	https://6913eb77589ce50008df1afc--toha-ci.netlify.app/posts/markdown-sample/

Device	URL
desktop	https://6913eb77589ce50008df1afc--toha-ci.netlify.app/posts/shortcodes/

Device	URL
mobile	https://6913eb77589ce50008df1afc--toha-ci.netlify.app/posts/shortcodes/

Not what you expected? Are your scores flaky? GitHub runners could be the cause.
Try running on Foo instead

Initial plan

2e97891

Copilot AI assigned Copilot and hossainemruz Nov 11, 2025

Copilot started work on behalf of hossainemruz November 11, 2025 23:52 View session

Copilot AI and others added 2 commits November 11, 2025 23:57

Initial exploration complete - planning mermaid dark theme support

8d6d258

Co-authored-by: hossainemruz <[email protected]>

Implement automatic mermaid dark theme support

63b53c4

Co-authored-by: hossainemruz <[email protected]>

Copilot AI changed the title ~~[WIP] Set mermaid dark theme automatically~~ Add automatic mermaid theme switching for dark mode Nov 12, 2025

Copilot AI requested a review from hossainemruz November 12, 2025 00:07

Copilot finished work on behalf of hossainemruz November 12, 2025 00:07

Merge branch 'main' into copilot/set-mermaid-dark-theme-auto

2ce3c9b

hossainemruz marked this pull request as ready for review November 12, 2025 01:26

github-actions bot reviewed Nov 12, 2025

View reviewed changes

Copilot started work on behalf of hossainemruz November 12, 2025 01:43 View session

Fix mermaid re-rendering bug - store original content before first re…

5d0c60f

…nder Co-authored-by: hossainemruz <[email protected]>

Copilot finished work on behalf of hossainemruz November 12, 2025 01:48

Enable mermaid support for exampleSite

50aae44

hossainemruz approved these changes Nov 12, 2025

View reviewed changes

hossainemruz added enhancement New feature or request feature labels Nov 12, 2025

hossainemruz merged commit e282253 into main Nov 12, 2025
13 checks passed

hossainemruz deleted the copilot/set-mermaid-dark-theme-auto branch November 12, 2025 02:08

github-actions bot reviewed Nov 12, 2025

View reviewed changes

hossainemruz mentioned this pull request Nov 12, 2025

Allow different mermaid theme on dark mode #1043

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add automatic mermaid theme switching for dark mode #1099

Add automatic mermaid theme switching for dark mode #1099

Copilot AI commented Nov 11, 2025 •

edited

Loading

Uh oh!

netlify bot commented Nov 11, 2025 •

edited

Loading

Uh oh!

github-actions bot left a comment

Uh oh!

hossainemruz commented Nov 12, 2025

Uh oh!

Copilot AI commented Nov 12, 2025

Uh oh!

Uh oh!

github-actions bot left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Add automatic mermaid theme switching for dark mode #1099

Add automatic mermaid theme switching for dark mode #1099

Conversation

Copilot AI commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Implementation Complete: Automatic Mermaid Dark Theme Support

Summary

Bug Fix Applied

How It Works

Testing

Describe the solution you'd like

Uh oh!

netlify bot commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for toha-ci ready!

Uh oh!

github-actions bot left a comment

Choose a reason for hiding this comment

Uh oh!

hossainemruz commented Nov 12, 2025

Uh oh!

Copilot AI commented Nov 12, 2025

Uh oh!

Uh oh!

github-actions bot left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Nov 11, 2025 •

edited

Loading

netlify bot commented Nov 11, 2025 •

edited

Loading