PageSourceSearch

https://lruihao.cn/posts/mermaid-theming/

html lruihao.cn collected 2026-09-25 21:46:49 UTC 93,288 bytes, 424 lines download raw bytes

1<!doctype html><html itemscope itemtype=http://schema.org/WebPage lang=zh-CN dir=ltr><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=2"><title>让 Mermaid 图表自动跟随系统深浅色 | 菠菜眾長</title><meta name=author content="Lruihao"><meta name=description content="Mermaid 是目前最流行的「文本即图表」渲染库,但它对「系统深浅色自动切换」的支持一直暧昧不明。官方 Roadmap 里偶有提及,却始终没有一个简单、稳定、文档化的 API。
2不过社区里已有大量站点(mermaid.live、Obsidian、Notion-like 产品等)实现了丝滑的 Light/Dark 自适应。本文把目前能落地的三条路线一次性梳理出来,并给出最小可运行示例,方便你按需取用。
3"><meta name=robots content="index, follow, max-image-preview:large"><meta name=keywords content='invert filter,Mermaid,prefers-color-scheme,FixIt'><meta itemprop=name content="让 Mermaid 图表自动跟随系统深浅色"><meta itemprop=description content="Mermaid 是目前最流行的「文本即图表」渲染库,但它对「系统深浅色自动切换」的支持一直暧昧不明。官方 Roadmap 里偶有提及,却始终没有一个简单、稳定、文档化的 API。
4不过社区里已有大量站点(mermaid.live、Obsidian、Notion-like 产品等)实现了丝滑的 Light/Dark 自适应。本文把目前能落地的三条路线一次性梳理出来,并给出最小可运行示例,方便你按需取用。"><meta itemprop=datePublished content="2025-08-16T12:37:49+08:00"><meta itemprop=dateModified content="2025-08-16T14:56:28+08:00"><meta itemprop=wordCount content="2516"><meta itemprop=image content="https://lruihao.cn/posts/mermaid-theming/featured-image.webp"><meta itemprop=keywords content="invert filter,Mermaid,prefers-color-scheme,FixIt"><meta property="og:url" content="https://lruihao.cn/posts/mermaid-theming/"><meta property="og:site_name" content="菠菜眾長"><meta property="og:title" content="让 Mermaid 图表自动跟随系统深浅色"><meta property="og:description" content="Mermaid 是目前最流行的「文本即图表」渲染库,但它对「系统深浅色自动切换」的支持一直暧昧不明。官方 Roadmap 里偶有提及,却始终没有一个简单、稳定、文档化的 API。
5不过社区里已有大量站点(mermaid.live、Obsidian、Notion-like 产品等)实现了丝滑的 Light/Dark 自适应。本文把目前能落地的三条路线一次性梳理出来,并给出最小可运行示例,方便你按需取用。"><meta property="og:locale" content="zh_CN"><meta property="og:type" content="article"><meta property="article:section" content="posts"><meta property="article:published_time" content="2025-08-16T12:37:49+08:00"><meta property="article:modified_time" content="2025-08-16T14:56:28+08:00"><meta property="article:tag" content="invert filter"><meta property="article:tag" content="Mermaid"><meta property="article:tag" content="prefers-color-scheme"><meta property="article:tag" content="FixIt"><meta property="og:image" content="https://lruihao.cn/posts/mermaid-theming/featured-image.webp"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://lruihao.cn/posts/mermaid-theming/featured-image.webp"><meta name=twitter:title content="让 Mermaid 图表自动跟随系统深浅色"><meta name=twitter:description content="Mermaid 是目前最流行的「文本即图表」渲染库,但它对「系统深浅色自动切换」的支持一直暧昧不明。官方 Roadmap 里偶有提及,却始终没有一个简单、稳定、文档化的 API。
6不过社区里已有大量站点(mermaid.live、Obsidian、Notion-like 产品等)实现了丝滑的 Light/Dark 自适应。本文把目前能落地的三条路线一次性梳理出来,并给出最小可运行示例,方便你按需取用。"><meta name=application-name content="菠菜眾長"><meta name=apple-mobile-web-app-title content="菠菜眾長"><meta name=theme-color data-light=#ffffff data-dark=#252627 content="#ffffff"><meta name=msapplication-TileColor content="#da532c"><link rel="shortcut icon" type=image/x-icon href=/favicon.ico><link rel=icon type=image/png sizes=32x32 href=/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/favicon-16x16.png><link rel=apple-touch-icon sizes=180x180 href=/apple-touch-icon.png><link rel=mask-icon href=/safari-pinned-tab.svg color=#5bbad5><link rel=canonical type=text/html href=https://lruihao.cn/posts/mermaid-theming/ title="让 Mermaid 图表自动跟随系统深浅色 | 菠菜眾長"><link rel=prev type=text/html href=https://lruihao.cn/posts/wc-01-prologue/ t
6itle=黑盒出关・三把钥匙定江湖><link rel=next type=text/html href=https://lruihao.cn/projects/lruihao/auto-changelog-plus/ title="Command line tool for generating a changelog from git tags and commit history"><link rel=alternate type=text/markdown href=https://lruihao.cn/posts/mermaid-theming/index.md><link rel=stylesheet href=/css/unocss.min.css><link rel=stylesheet href=/css/main.min.css><link rel=stylesheet href=/css/pages/posts.min.css><link rel=stylesheet href=/css/custom.min.css><link rel=preload href=https://unpkg.com/@fortawesome/[email protected]/css/all.min.css as=style onload='this.removeAttribute("onload"),this.rel="stylesheet"'><noscript><link rel=stylesheet href=https://unpkg.com/@fortawesome/[email protected]/css/all.min.css></noscript><link rel=preload href=https://unpkg.com/[email protected]/animate.min.css as=style onload='this.removeAttribute("onload"),this.rel="stylesheet"'><noscript><link rel=stylesheet href=https://unpkg.com/[email protected]/animate.min.css></noscript><link rel=preload href=/js/main.min.js as=script>
6<script type=application/ld+json>{"@context":"http://schema.org","@type":"BlogPosting","headline":"让 Mermaid 图表自动跟随系统深浅色","inLanguage":"zh-CN","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/lruihao.cn\/posts\/mermaid-theming\/"},"image":[{"@type":"ImageObject","url":"https:\/\/lruihao.cn\/posts\/mermaid-theming\/featured-image.webp","width":1720,"height":722}],"genre":"posts","keywords":"invert filter, Mermaid, prefers-color-scheme, FixIt","wordcount":2516,"url":"https:\/\/lruihao.cn\/posts\/mermaid-theming\/","datePublished":"2025-08-16T12:37:49+08:00","dateModified":"2025-08-16T14:56:28+08:00","license":"本站内容采用 CC BY-NC-SA 4.0 国际许可协议。","publisher":{"@type":"Organization","name":"Lruihao","logo":"https:\/\/lruihao.cn\/images\/avatar.jpg"},"author":{"@type":"Person","name":"Lruihao"},"description":""}</script>
6<script src=/js/head.min.js></script>
6</head><body data-instant-intensity=viewport data-header-desktop=sticky data-header-mobile=auto><div class=wrapper data-page-style=normal><header class="desktop animate__faster" id=header-desktop><div class=header-wrapper data-github-corner=end><div class=header-title><a href=/ title=菠菜眾長 class=header-title-link><img class=logo src=/logo.webp alt=菠菜眾長 height=32 width=32><span class=header-title-text>菠菜众长</span></a><span class=header-subtitle>李瑞豪的博客</span></div><nav><ul class=menu><li class="menu-item has-children"><a class=menu-link href=/archives/><i class="fa-solid fa-feather fa-sm" aria-hidden=true></i> 文章</a><i class="dropdown-icon fa-solid fa-chevron-down" aria-hidden=true></i><ul class=sub-menu><li class=menu-item><a class=menu-link href=/categories/><i class="fa-solid fa-folder-tree fa-sm" aria-hidden=true></i> 分类</a></li><li class=menu-item><a class=menu-link href=/collections/><i class="fa-solid fa-layer-group fa-sm" aria-hidden=true></i> 合集</a></li><li class=menu-item><a class=menu-link href=/tags/><i class="fa-solid fa-tags fa-sm" aria-hidden=true></i> 标签</a></li><li class=menu-item-divider aria-hidden=true></li><li class=menu-item><a class=menu-link href=https://fixit.lruihao.cn/ title="FixIt 官网" rel="noopener noreferrer" target=_blank><img class=fixit-icon src=https://fixit.lruihao.cn/images/hugo-fixit.webp alt="FixIt logo"> FixIt <i class="fa-solid fa-external-link-alt fa-fw fa-xs text-secondary"></i></a></li></ul></li><li class=menu-item><a class=menu-link href=/projects/ title=开源项目><i class="fa-solid fa-lightbulb fa-shake fa-sm" aria-hidden=true></i> 开源</a></li><li class=menu-item><a class=menu-link href=/friends/ title=友情链接><i class="fa-solid fa-users fa-sm" aria-hidden=true></i> 友链</a></li><li class=menu-item><a class=menu-link href=/reward/><i class="fa-solid fa-hand-holding-dollar fa-sm" aria-hidden=true></i> 赞赏</a></li><li class=menu-item><a class=menu-link href=/guestbook/><i class="fa-solid fa-comment-dots fa-sm" aria-hidden=true></i> 留言</a></li><li class=menu-item><a class=menu-link href=/index.xml title="通过 RSS 订阅"><i class="fa-solid fa-rss fa-sm" aria-hidden=true></i> RSS</a></li><li class="menu-item has-children"><a class=menu-link href=/about/><i class="fa-solid fa-quote-left fa-sm" aria-hidden=true></i> 关于</a><i class="dropdown-icon fa-solid fa-chevron-down" aria-hidden=true></i><ul class=sub-menu><li class=menu-item><a class=menu-link href=/years/ title=我的年度总结><i class="fa-regular fa-newspaper fa-sm" aria-hidden=true></i> 年度总结</a></li></ul></li><li class="menu-item delimiter"></li><li class="menu-item search"><button type=button class="search-trigger desktop" aria-label=搜索 title=搜索>
7<i class="fa-solid fa-search" aria-hidden=true></i>
8搜索
9<kbd></kbd></button></li><li class="menu-item delimiter"></li><li class="menu-item theme-switch-item"><button type=button class=theme-switch aria-label=切换主题 title=切换主题><i class="fa-solid fa-adjust" aria-hidden=true></i></button></li><li class="menu-item language-switch auto hidden" aria-hidden=true><span role=button aria-label=选择语言 title=选择语言><i class="fa-solid fa-language fa-fw" aria-hidden=true></i></span><ul class=sub-menu><li class="menu-item active" data-type=artificial><a href=/posts/mermaid-theming/ data-lang=zh-CN class="menu-link text-secondary" title=简体中文><i class="fa-solid fa-person fa-fw fa-sm" aria-hidden=true></i> 简体中文</a></li><li class=menu-item-divider aria-hidden=true></li><li class=menu-item data-type=machine><a data-lang=chinese_simplified class=menu-link title=简体中文><i class="fa-solid fa-robot fa-fw fa-sm" aria-hidden=true></i> 简体中文</a></li><li class=menu-item data-type=machine><a data-lang=chinese_traditional class=menu-link title=繁體中文><i class="fa-solid fa-robot fa-fw fa-sm" aria-hidden=true></i> 繁體中文</a></li></ul></li></ul></nav></div></header><header class="mobile animate__faster" id=header-mobile><div class=header-container><div class=header-wrapper><div class=header-title><a href=/ title=菠菜眾長 class=header-title-link><img class=logo src=/logo.webp alt=菠菜眾長 height=26 width=26><span class=header-title-text>菠菜众长</span></a><span class=header-subtitle>李瑞豪的博客</span></div><button type=button class="search-trigger mobile" aria-label=搜索><i class="fa-solid fa-search" aria-hidden=true></i></button><button type=button class=theme-switch aria-label=切换主题><i class="fa-solid fa-adjust" aria-hidden=true></i></button>
10<button type=button class=menu-toggle id=menu-toggle-mobile aria-controls=menu-mobile aria-expanded=false aria-labelledby=menu-mobile>
11<span></span><span></span><span></span></button></div><nav><ul class=menu id=menu-mobile><li class=menu-item><span class=nested-item><a class=menu-link href=/archives/><i class="fa-solid fa-feather fa-sm" aria-hidden=true></i> 文章</a>
12<i class="dropdown-icon fa-solid fa-chevron-right" aria-hidden=true></i></span><ul class=sub-menu><li class=menu-item><a class=menu-link href=/categories/><i class="fa-solid fa-folder-tree fa-sm" aria-hidden=true></i> 分类</a></li><li class=menu-item><a class=menu-link href=/collections/><i class="fa-solid fa-layer-group fa-sm" aria-hidden=true></i> 合集</a></li><li class=menu-item><a class=menu-link href=/tags/><i class="fa-solid fa-tags fa-sm" aria-hidden=true></i> 标签</a></li><li class="menu-item menu-item-divider" aria-hidden=true></li><li class=menu-item><a class=menu-link href=https://fixit.lruihao.cn/ title="FixIt 官网" rel="noopener noreferrer" target=_blank><img class=fixit-icon src=https://fixit.lruihao.cn/images/hugo-fixit.webp alt="FixIt logo"> FixIt <i class="fa-solid fa-external-link-alt fa-fw fa-xs text-secondary"></i></a></li></ul></li><li class=menu-item><a class=menu-link href=/projects/ title=开源项目><i class="fa-solid fa-lightbulb fa-shake fa-sm" aria-hidden=true></i> 开源</a></li><li class=menu-item><a class=menu-link href=/friends/ title=友情链接><i class="fa-solid fa-users fa-sm" aria-hidden=true></i> 友链</a></li><li class=menu-item><a class=menu-link href=/reward/><i class="fa-solid fa-hand-holding-dollar fa-sm" aria-hidden=true></i> 赞赏</a></li><li class=menu-item><a class=menu-link href=/guestbook/><i class="fa-solid fa-comment-dots fa-sm" aria-hidden=true></i> 留言</a></li><li class=menu-item><span class=nested-item><a class=menu-link href=/about/><i class="fa-solid fa-quote-left fa-sm" aria-hidden=true></i> 关于</a>
13<i class="dropdown-icon fa-solid fa-chevron-right" aria-hidden=true></i></span><ul class=sub-menu><li class=menu-item><a class=menu-link href=/years/ title=我的年度总结><i class="fa-regular fa-newspaper fa-sm" aria-hidden=true></i> 年度总结</a></li></ul></li><li class="menu-item text-center"><a class=menu-link href=https://github.com/Lruihao/ rel="noopener noreferrer" target=_blank><i class="fa-brands fa-github fa-lg fa-sm" aria-hidden=true></i> 关注 Follow</a></li><li class="menu-item menu-system"><span id=translate class="menu-system-item language-switch auto hidden" aria-hidden=true><span role=button aria-label=选择语言 title=选择语言 data-current=简体中文>简体中文<i class="dropdown-icon fa-solid fa-chevron-down" aria-hidden=true></i></span></span></li></ul></nav></div></header><nav aria-label=breadcrumb class="breadcrumb-container sticky"><ol class=breadcrumb><li class=breadcrumb-item data-separator=/><a href=/posts/ title=Posts>文章</a></li><li class="breadcrumb-item active" data-separator=/ aria-current=page>让 Mermaid 图表自动跟随系统深浅色</li></ol></nav><main class=fi-container><aside class="aside-collection animate__animated animate__fadeIn animate__faster" aria-label=合集><div class=aside-custom><img src=/images/wxmp.webp alt=微信公众号 width=100%></div></aside><article class="page single"><div class=header><h1 class="single-title animate__animated animate__flipInX"><span>让 Mermaid 图表自动跟随系统深浅色</span></h1><p class="single-subtitle animate__animated animate__fadeIn">一份现阶段可行方案全梳理</p></div><div class=post-meta><div class=post-meta-line><span class=post-author><a href=https://github.com/Lruihao title=作者 target=_blank rel="author external nofollow noopener noreferrer" class=author><img class=avatar src=/images/remote/fee47a2f4f2cc71f99a02b0a73ecfee0_13827746709750628118.jpg alt=Lruihao height=16 width=16>&nbsp;Lruihao</a></span><span class=post-included-in>&nbsp;收录于 <a href=/categories/javascript/ class=post-category title="分类 - JavaScript"><i class="fa-regular fa-folder" aria-hidden=true></i> JavaScript</a>&ensp;<a href=/categories/css/ class=post-category title="分类 - CSS"><i class="fa-regular fa-folder" aria-hidden=true></i> CSS</a></span></div><div class=post-meta-line><span title="发布于 2025-08-16 12:37:49"><i class="fa-solid fa-calendar-days me-1" aria-hidden=true></i><time datetime=2025-08-16>2025-08-16</time></span>&nbsp;<span title="更新于 2025-08-16 14:56:28"><i class="fa-regular fa-calendar-check me-1" aria-hidden=true></i><time datetime=2025-08-16>2025-08-16</time></span>&nbsp;<span title="2516 字"><i class="fa-solid fa-pencil me-1" aria-hidden=true></i>
13约 2600 字</span>&nbsp;<span><i class="fa-regular fa-clock me-1" aria-hidden=true></i>预计阅读 6 分钟</span>&nbsp;<span id=busuanzi_container_page_pv class="busuanzi_visitors comment-visitors" data-flag-title="让 Mermaid 图表自动跟随系统深浅色"><i class="fa-regular fa-eye me-1" aria-hidden=true></i><span id=busuanzi_value_page_pv>-</span>&nbsp;次阅读
14</span>&nbsp;</div></div><div class=featured-image><img loading=eager src=/posts/mermaid-theming/featured-image.webp sizes="(max-width: 679.9px) 100vw, (max-width: 959.9px) 80vw, (max-width: 1439.9px) 56vw, 800px" alt=/posts/mermaid-theming/featured-image.webp height=722 width=1720></div><div class="details toc" id=toc-static data-kept=false><div class="details-summary toc-title"><span>目录</span>
15<span><i class="details-icon fa-solid fa-angle-right" aria-hidden=true></i></span></div><div class="details-content toc-content" id=toc-content-static></div></div><template data-toc><nav id=TableOfContents><ul><li><a href=#背景mermaid-主题机制与痛点>背景:Mermaid 主题机制与痛点</a></li><li><a href=#方案-1-reinitialize>方案 1️⃣ Reinitialize</a></li><li><a href=#方案-2-css-滤镜>方案 2️⃣ CSS 滤镜</a></li><li><a href=#方案-3-配置热替换>方案 3️⃣ 配置热替换</a></li><li><a href=#方案-4-reinitialize--css-结合>方案 4️⃣ Reinitialize + CSS 结合</a></li><li><a href=#小结与选型建议>小结与选型建议</a></li></ul></nav></template><div class=ai-summary></div><div class="expiration-reminder details admonition warning open"><div class="details-summary admonition-title"><i class="icon fa-solid fa-exclamation-triangle" aria-hidden=true></i>警告<i class="details-icon fa-solid fa-angle-right" aria-hidden=true></i></div><div class=details-content><div class=admonition-content>本文最后更新于 2025-08-16,文中内容可能已过时。</div></div></div><div class=content id=content data-end-flag="「本文完,更多内容汇总在我的 GitHub,持续更新,求关注、求 star、求订阅!」"><p>Mermaid 是目前最流行的「文本即图表」渲染库,但它对「系统深浅色自动切换」的支持一直暧昧不明。官方 Roadmap 里偶有提及,却始终没有一个简单、稳定、文档化的 API。<br>不过社区里已有大量站点(mermaid.live、Obsidian、Notion-like 产品等)实现了丝滑的 Light/Dark 自适应。本文把目前能落地的三条路线一次性梳理出来,并给出最小可运行示例,方便你按需取用。</p><h2 class=heading-element id=背景mermaid-主题机制与痛点><span>背景:Mermaid 主题机制与痛点</span>
16<a href=#%e8%83%8c%e6%99%afmermaid-%e4%b8%bb%e9%a2%98%e6%9c%ba%e5%88%b6%e4%b8%8e%e7%97%9b%e7%82%b9 class=heading-mark><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5.0 114.95 4.95l-2.5 2.5a3.5 3.5.0 01-4.95.0.751.751.0 01.018-1.042.751.751.0 011.042-.018 1.998 1.998.0 002.83.0l2.5-2.5a2.002 2.002.0 00-2.83-2.83l-1.25 1.25a.751.751.0 01-1.042-.018.751.751.0 01-.018-1.042zm-4.69 9.64a1.998 1.998.0 002.83.0l1.25-1.25a.751.751.0 011.042.018.751.751.0 01.018 1.042l-1.25 1.25a3.5 3.5.0 11-4.95-4.95l2.5-2.5a3.5 3.5.0 014.95.0.751.751.0 01-.018 1.042.751.751.0 01-1.042.018 1.998 1.998.0 00-2.83.0l-2.5 2.5a1.998 1.998.0 000 2.83z"/></svg></a></h2><div class="code-tabs diagram-tabs" data-diagram=mermaid><div class=tabs-header><div class=tabs-items><span class="tab-item active" data-tab=diagram title=图表>图表</span>
17<span class=tab-item data-tab=code title=代码>代码</span></div><div class=tabs-actions><button type=button class="action-btn diagram-zoom-out-btn" aria-label=缩小 title=缩小><i class="fa-solid fa-magnifying-glass-minus" aria-hidden=true></i></button>
18<button type=button class="action-btn diagram-zoom-in-btn" aria-label=放大 title=放大><i class="fa-solid fa-magnifying-glass-plus" aria-hidden=true></i></button>
19<button type=button class="action-btn diagram-reset-btn" aria-label=重置 title=重置><i class="fa-solid fa-arrows-rotate" aria-hidden=true></i></button>
20<button type=button class="action-btn diagram-download-btn" aria-label="下载 SVG" title="下载 SVG"><i class="fa-solid fa-download" aria-hidden=true></i></button></div></div><div class=tabs-content><div class="code-block diagram-view active" data-filename=mermaid.mmd><div class=diagram-container><pre class=mermaid>flowchart LR
21  A(["Start"])
22  A --> B{"Decision"}
23  B -->|Yes| C["Option A"]
24  B -->|No| D["Option B"]</pre><pre class=mermaid-dark>flowchart LR
25  A(["Start"])
26  A --> B{"Decision"}
27  B -->|Yes| C["Option A"]
28  B -->|No| D["Option B"]</pre><pre class=mermaid-neutral>flowchart LR
29  A(["Start"])
30  A --> B{"Decision"}
31  B -->|Yes| C["Option A"]
32  B -->|No| D["Option B"]</pre></div></div><div class="code-block highlight diagram-code" data-mode=classic data-copyable=true copyable=true fullscreen=true filename=mermaid.mmd><div class=chroma><div class="code-header language-text"><span class=code-title><i class="arrow fa-solid fa-chevron-down" aria-hidden=true></i></span><button type=button class=ellipses-btn aria-label="Show more options"><i class="fa-solid fa-ellipsis-h" aria-hidden=true></i></button><button type=button class="action-btn line-nos-btn" aria-label=切换行号 title=切换行号><i class="fa-solid fa-list-ol" aria-hidden=true></i></button><button type=button class="action-btn line-wrap-btn" aria-label=切换自动换行 title=切换自动换行><i class="fa-solid fa-right-left" aria-hidden=true></i></button><button type=button class="action-btn copy-btn" aria-label=复制到剪贴板 title=复制到剪贴板 data-copied-text=已复制>
32<i class="fa-regular fa-clone" aria-hidden=true></i></button><button type=button class="action-btn fullscreen-btn" aria-label=全屏 title=全屏 data-exit-title=退出全屏><i class="fa-solid fa-expand" aria-hidden=true></i></button></div><div class=code-wrapper data-max=10 data-line-digit=1 style=--fi-max-shown-lines:10;--fi-line-digit:1;--fi-line-start:1><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
33</span><span class=lnt>2
34</span><span class=lnt>3
35</span><span class=lnt>4
36</span><span class=lnt>5
37</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-text data-lang=text><span class=line><span class=cl>flowchart LR
38</span></span><span class=line><span class=cl>  A([&#34;Start&#34;])
39</span></span><span class=line><span class=cl>  A --&gt; B{&#34;Decision&#34;}
40</span></span><span class=line><span class=cl>  B --&gt;|Yes| C[&#34;Option A&#34;]
41</span></span><span class=line><span class=cl>  B --&gt;|No| D[&#34;Option B&#34;]</span></span></code></pre></td></tr></table></div></div></div></div></div><p>Mermaid 在初始化时通过 <code>theme</code> 字段选定配色,例如:</p><div class="code-block highlight" data-mode=classic data-copyable=true><div class=chroma><div class="code-header language-js"><span class=code-title><i class="arrow fa-solid fa-chevron-down" aria-hidden=true></i></span><button type=button class=ellipses-btn aria-label="Show more options"><i class="fa-solid fa-ellipsis-h" aria-hidden=true></i></button><button type=button class="action-btn line-nos-btn" aria-label=切换行号 title=切换行号><i class="fa-solid fa-list-ol" aria-hidden=true></i></button><button type=button class="action-btn line-wrap-btn" aria-label=切换自动换行 title=切换自动换行><i class="fa-solid fa-right-left" aria-hidden=true></i></button><button type=button class="action-btn copy-btn" aria-label=复制到剪贴板 title=复制到剪贴板 data-copied-text=已复制><i class="fa-regular fa-clone" aria-hidden=true></i></button></div><div class=code-wrapper data-max=10 data-line-digit=1 style=--fi-max-shown-lines:10;--fi-line-digit:1;--fi-line-start:1><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
42</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-js data-lang=js><span class=line><span class=cl><span class=nx>mermaid</span><span class=p>.</span><span class=nx>initialize</span><span class=p>({</span> <span class=nx>theme</span><span class=o>:</span> <span class=s1>&#39;dark&#39;</span> <span class=p>});</span></span></span></code></pre></td></tr></table></div></div></div><p>但这条配置 <strong>只在首次渲染时生效</strong>。当用户在操作系统层面切到 Light/Dark,或者网页本身提供手动开关时,Mermaid 并不会自动重绘。这就导致:</p><ul><li>暗黑系统 + 浅色图表 ⇒ 刺眼</li><li>浅色系统 + 暗黑图表 ⇒ 同样刺眼</li></ul><p>社区 Issue <a href=https://github.com/mermaid-js/mermaid/issues/2644 target=_blank rel="external nofollow noopener noreferrer">#2644<i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden=true></i></a> 早在 2022 年就提出希望官方支持 <code>prefers-color-scheme</code>,但至今(2025-08)仍未合入主干。</p><p>顺便提一下,主题的切换一般都有两种主流方式:</p><ol><li>利用 <code>prefers-color-scheme</code> 感知系统级别主题变化,<code>matchMedia('(prefers-color-scheme: dark)')</code> 的 <code>change</code> 事件。</li><li>通过 <code>dark</code> class 手动切换,这种方式通常会在 html/body 上设置一个 <code>class</code> 或者 <code>data-theme="dark"</code> 这样。</li></ol><h2 class=heading-element id=方案-1-reinitialize><span>方案 1️⃣ Reinitialize</span>
43<a href=#%e6%96%b9%e6%a1%88-1-reinitialize class=heading-mark><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5.0 114.95 4.95l-2.5 2.5a3.5 3.5.0 01-4.95.0.751.751.0 01.018-1.042.751.751.0 011.042-.018 1.998 1.998.0 002.83.0l2.5-2.5a2.002 2.002.0 00-2.83-2.83l-1.25 1.25a.751.751.0 01-1.042-.018.751.751.0 01-.018-1.042zm-4.69 9.64a1.998 1.998.0 002.83.0l1.25-1.25a.751.751.0 011.042.018.751.751.0 01.018 1.042l-1.25 1.25a3.5 3.5.0 11-4.95-4.95l2.5-2.5a3.5 3.5.0 014.95.0.751.751.0 01-.018 1.042.751.751.0 01-1.042.018 1.998 1.998.0 00-2.83.0l-2.5 2.5a1.998 1.998.0 000 2.83z"/></svg></a></h2><p>切换主题,重新 <code>initialize</code> + 重绘,这是目前来看大多数人的做法。</p><p>思路:</p><ol><li>备份原始的 Mermaid code</li><li>设置 <code>startOnLoad: false</code> 避免 Mermaid 自动渲染,然后使用 <code>mermaid.initialize({ theme: theme })</code> + <code>mermaid.run()</code> 完成初始化。</li><li>重新渲染时移除 <code>data-processed</code>,替换 <code>.mermaid</code> 的内容为原始 Mermaid code,使用 <code>mermaid.initialize({ theme: newTheme })</code> + <code>mermaid.run()</code> 重新渲染</li></ol><p>这份做法在 Issue <a href=https://github.com/mermaid-js/mermaid/issues/1945#issuecomment-1661264708 target=_blank rel="external nofollow noopener noreferrer">#1945<i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden=true></i></a> 里有完整代码,下面给出精简版:</p><p>优点是:</p><ul><li>利用现有官方 API</li></ul><p>缺点是:</p><ul><li>每次切换都需要重新渲染,大图会闪一下</li><li>如果页面里图表很多,性能损耗不可忽视</li><li>还有异步处理带来的一系列问题</li></ul><h2 class=heading-element id=方案-2-css-滤镜><span>方案 2️⃣ CSS 滤镜</span>
44<a href=#%e6%96%b9%e6%a1%88-2-css-%e6%bb%a4%e9%95%9c class=heading-mark>
44<svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5.0 114.95 4.95l-2.5 2.5a3.5 3.5.0 01-4.95.0.751.751.0 01.018-1.042.751.751.0 011.042-.018 1.998 1.998.0 002.83.0l2.5-2.5a2.002 2.002.0 00-2.83-2.83l-1.25 1.25a.751.751.0 01-1.042-.018.751.751.0 01-.018-1.042zm-4.69 9.64a1.998 1.998.0 002.83.0l1.25-1.25a.751.751.0 011.042.018.751.751.0 01.018 1.042l-1.25 1.25a3.5 3.5.0 11-4.95-4.95l2.5-2.5a3.5 3.5.0 014.95.0.751.751.0 01-.018 1.042.751.751.0 01-1.042.018 1.998 1.998.0 00-2.83.0l-2.5 2.5a1.998 1.998.0 000 2.83z"/></svg></a></h2><p>作为支持 <code>prefers-color-scheme</code> 和手动切换的一种简单的解决方案,可以使用 CSS 反转滤镜(<code>invert</code>、<code>hue-rotate</code> 等)来实现。</p><p>例如:</p><div class="code-block highlight" data-mode=classic data-copyable=true><div class=chroma><div class="code-header language-css"><span class=code-title><i class="arrow fa-solid fa-chevron-down" aria-hidden=true></i></span><button type=button class=ellipses-btn aria-label="Show more options"><i class="fa-solid fa-ellipsis-h" aria-hidden=true></i></button><button type=button class="action-btn line-nos-btn" aria-label=切换行号 title=切换行号><i class="fa-solid fa-list-ol" aria-hidden=true></i></button><button type=button class="action-btn line-wrap-btn" aria-label=切换自动换行 title=切换自动换行><i class="fa-solid fa-right-left" aria-hidden=true></i></button><button type=button class="action-btn copy-btn" aria-label=复制到剪贴板 title=复制到剪贴板 data-copied-text=已复制><i class="fa-regular fa-clone" aria-hidden=true></i></button></div><div class=code-wrapper data-max=10 data-line-digit=1 style=--fi-max-shown-lines:10;--fi-line-digit:1;--fi-line-start:1><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
45</span><span class=lnt>2
46</span><span class=lnt>3
47</span><span class=lnt>4
48</span><span class=lnt>5
49</span><span class=lnt>6
50</span><span class=lnt>7
51</span><span class=lnt>8
52</span><span class=lnt>9
53</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-css data-lang=css><span class=line><span class=cl><span class=o>[</span><span class=nt>data-theme</span><span class=o>=</span><span class=s1>&#39;dark&#39;</span><span class=o>]</span> <span class=p>.</span><span class=nc>mermaid</span> <span class=p>{</span>
54</span></span><span class=line><span class=cl>  <span class=k>filter</span><span class=p>:</span> <span class=nb>invert</span><span class=p>(</span><span class=mf>0.88</span><span class=p>);</span>
55</span></span><span class=line><span class=cl><span class=p>}</span>
56</span></span><span class=line><span class=cl>
57</span></span><span class=line><span class=cl><span class=p>@</span><span class=k>media</span> <span class=o>(</span><span class=nt>prefers-color-scheme</span><span class=o>:</span> <span class=nt>dark</span><span class=o>)</span> <span class=p>{</span>
58</span></span><span class=line><span class=cl>  <span class=p>:</span><span class=nd>root</span><span class=p>:</span><span class=nd>not</span><span class=o>([</span><span class=nt>data-theme</span><span class=o>=</span><span class=s1>&#39;light&#39;</span><span class=o>])</span> <span class=p>.</span><span class=nc>mermaid</span> <span class=p>{</span>
59</span></span><span class=line><span class=cl>    <span class=k>filter</span><span class=p>:</span> <span class=nb>invert</span><span class=p>(</span><span class=mf>0.88</span><span class=p>);</span>
60</span></span><span class=line><span class=cl>  <span class=p>}</span>
61</span></span><span class=line><span class=cl><span class=p>}</span></span></span></code></pre></td></tr></table></div></div></div><p>这条技巧是我在 Issue <a href=https://github.com/mermaid-js/mermaid/issues/2644#issuecomment-2313201033 target=_blank rel="external nofollow noopener noreferrer">#2644<i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden=true></i></a> 中看到的。</p><p>优点是:</p><ul><li>一行 CSS,无 JS</li><li>不重新渲染,零延迟</li></ul><p>缺点是:</p><ul><li>只是「反色」,并非官方暗黑主题</li><li>对于红色、绿色等语义色会完全失真</li><li>如果背景不是纯黑纯白,观感会很奇怪</li></ul><p>由于太过简单,效果也很粗糙,适合做 Demo 或内部工具,不建议面向终端用户。</p><h2 class=heading-element id=方案-3-配置热替换><span>方案 3️⃣ 配置热替换</span>
62<a href=#%e6%96%b9%e6%a1%88-3-%e9%85%8d%e7%bd%ae%e7%83%ad%e6%9b%bf%e6%8d%a2 class=heading-mark>
62<svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5.0 114.95 4.95l-2.5 2.5a3.5 3.5.0 01-4.95.0.751.751.0 01.018-1.042.751.751.0 011.042-.018 1.998 1.998.0 002.83.0l2.5-2.5a2.002 2.002.0 00-2.83-2.83l-1.25 1.25a.751.751.0 01-1.042-.018.751.751.0 01-.018-1.042zm-4.69 9.64a1.998 1.998.0 002.83.0l1.25-1.25a.751.751.0 011.042.018.751.751.0 01.018 1.042l-1.25 1.25a3.5 3.5.0 11-4.95-4.95l2.5-2.5a3.5 3.5.0 014.95.0.751.751.0 01-.018 1.042.751.751.0 01-1.042.018 1.998 1.998.0 00-2.83.0l-2.5 2.5a1.998 1.998.0 000 2.83z"/></svg></a></h2><p>mermaid.live 站点能在用户切主题时瞬间完成切换,且颜色完全与官方暗黑主题对齐。从 <a href=https://github.com/mermaid-js/mermaid-live-editor target=_blank rel="external nofollow noopener noreferrer">源码<i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden=true></i></a> 和 DevTools 推测,它大概做了三件事:</p><ol><li>自己维护一份 <code>themeCSS</code> 字符串(而非仅用名字 <code>'dark'</code>)</li><li>在 <code>prefers-color-scheme</code> 变化时,直接把新的 CSS 注入到 <code>&lt;svg></code> 里的 <code>&lt;style></code> 节点</li><li>通过 <code>mermaid.render('id', code)</code> 拿到 SVG string 后,用正则替换掉旧 <code>&lt;style></code>,再 <code>DOMParser</code> 塞回页面</li></ol><p>Issue <a href=https://github.com/mermaid-js/mermaid/issues/2644#issuecomment-1029648289 target=_blank rel="external nofollow noopener noreferrer">#2644<i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden=true></i></a> 中有提到,在 mermaid.live 中,目前是根据配色方案在配置中切换主题。</p><p>优点:</p><ul><li>无闪烁</li><li>完全复用官方配色</li></ul><p>缺点:</p><ul><li>需要内部维护主题 CSS,Mermaid 每升级一次都要同步</li><li>实现细节依赖私有 API,官方一旦改动就会崩</li></ul><p>如果你极度追求体验,可以照着源码抄一份,但要做好长期维护的心理准备。</p><p><a href=https://github.com/mermaid-js/mermaid/issues/2644#issuecomment-1029648289 target=_blank rel="external nofollow noopener noreferrer">#2644<i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden=true></i></a> 中提到,在 mermaid.live 中,目前正在根据配色方案在配置中切换主题。这种方案暂时未找到更多的细节披露。我又懒得去深扒 mermaid.live 的实现细节。</p><h2 class=heading-element id=方案-4-reinitialize--css-结合><span>方案 4️⃣ Reinitialize + CSS 结合</span>
63<a href=#%e6%96%b9%e6%a1%88-4-reinitialize--css-%e7%bb%93%e5%90%88 class=heading-mark><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5.0 114.95 4.95l-2.5 2.5a3.5 3.5.0 01-4.95.0.751.751.0 01.018-1.042.751.751.0 011.042-.018 1.998 1.998.0 002.83.0l2.5-2.5a2.002 2.002.0 00-2.83-2.83l-1.25 1.25a.751.751.0 01-1.042-.018.751.751.0 01-.018-1.042zm-4.69 9.64a1.998 1.998.0 002.83.0l1.25-1.25a.751.751.0 011.042.018.751.751.0 01.018 1.042l-1.25 1.25a3.5 3.5.0 11-4.95-4.95l2.5-2.5a3.5 3.5.0 014.95.0.751.751.0 01-.018 1.042.751.751.0 01-1.042.018 1.998 1.998.0 00-2.83.0l-2.5 2.5a1.998 1.998.0 000 2.83z"/></svg></a></h2><p>在我的实践中,<a href=https://github.com/hugo-fixit/FixIt target=_blank rel="external nofollow noopener noreferrer">FixIt 主题<i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden=true></i></a> 是通过 <code>data-theme</code> 的方式手动切换网站主题的,我一开始走的思路和方案 1️⃣总体一致,为了处理这个方案的缺点,我多次迭代,有了最终的版本:</p><p>首先通过 <code>type=module</code> 引入 Mermaid:</p><div class="code-block highlight" data-mode=classic data-copyable=true><div class=chroma><div class="code-header language-js"><span class=code-title><i class="arrow fa-solid fa-chevron-down" aria-hidden=true></i></span><button type=button class=ellipses-btn aria-label="Show more options"><i class="fa-solid fa-ellipsis-h" aria-hidden=true></i></button><button type=button class="action-btn line-nos-btn" aria-label=切换行号 title=切换行号><i class="fa-solid fa-list-ol" aria-hidden=true></i></button><button type=button class="action-btn line-wrap-btn" aria-label=切换自动换行 title=切换自动换行><i class="fa-solid fa-right-left" aria-hidden=true></i></button><button type=button class="action-btn copy-btn" aria-label=复制到剪贴板 title=复制到剪贴板 data-copied-text=已复制>
63<i class="fa-regular fa-clone" aria-hidden=true></i></button></div><div class=code-wrapper data-max=10 data-line-digit=1 style=--fi-max-shown-lines:10;--fi-line-digit:1;--fi-line-start:1><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
64</span><span class=lnt>2
65</span><span class=lnt>3
66</span><span class=lnt>4
67</span><span class=lnt>5
68</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-js data-lang=js><span class=line><span class=cl><span class=kr>import</span> <span class=nx>mermaid</span> <span class=nx>from</span> <span class=s1>&#39;https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.js&#39;</span><span class=p>;</span>
69</span></span><span class=line><span class=cl><span class=kr>import</span> <span class=nx>zenuml</span> <span class=nx>from</span> <span class=s1>&#39;https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml/dist/mermaid-zenuml.esm.min.mjs&#39;</span><span class=p>;</span>
70</span></span><span class=line><span class=cl><span class=kr>await</span> <span class=nx>mermaid</span><span class=p>.</span><span class=nx>registerExternalDiagrams</span><span class=p>([</span><span class=nx>zenuml</span><span class=p>]);</span>
71</span></span><span class=line><span class=cl><span class=nx>mermaid</span><span class=p>.</span><span class=nx>startOnLoad</span> <span class=o>=</span> <span class=kc>false</span><span class=p>;</span>
72</span></span><span class=line><span class=cl><span class=nb>window</span><span class=p>.</span><span class=nx>mermaid</span> <span class=o>=</span> <span class=nx>mermaid</span><span class=p>;</span></span></span></code></pre></td></tr></table></div></div></div><p>然后在主题的切换逻辑中处理:</p><div class="code-block highlight" data-mode=classic data-copyable=true><div class=chroma><div class="code-header language-js"><span class=code-title><i class="arrow fa-solid fa-chevron-down" aria-hidden=true></i></span><button type=button class=ellipses-btn aria-label="Show more options"><i class="fa-solid fa-ellipsis-h" aria-hidden=true></i></button><button type=button class="action-btn line-nos-btn" aria-label=切换行号 title=切换行号><i class="fa-solid fa-list-ol" aria-hidden=true></i></button><button type=button class="action-btn line-wrap-btn" aria-label=切换自动换行 title=切换自动换行><i class="fa-solid fa-right-left" aria-hidden=true></i></button><button type=button class="action-btn copy-btn" aria-label=复制到剪贴板 title=复制到剪贴板 data-copied-text=已复制><i class="fa-regular fa-clone" aria-hidden=true></i></button></div><div class=code-wrapper data-max=10 data-line-digit=2 style=--fi-max-shown-lines:10;--fi-line-digit:2;--fi-line-start:1><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt> 1
73</span><span class=lnt> 2
74</span><span class=lnt> 3
75</span><span class=lnt> 4
76</span><span class=lnt> 5
77</span><span class=lnt> 6
78</span><span class=lnt> 7
79</span><span class=lnt> 8
80</span><span class=lnt> 9
81</span><span class=lnt>10
82</span><span class=lnt>11
83</span><span class=lnt>12
84</span><span class=lnt>13
85</span><span class=lnt>14
86</span><span class=lnt>15
87</span><span class=lnt>16
88</span><span class=lnt>17
89</span><span class=lnt>18
90</span><span class=lnt>19
91</span><span class=lnt>20
92</span><span class=lnt>21
93</span><span class=lnt>22
94</span><span class=lnt>23
95</span><span class=lnt>24
96</span><span class=lnt>25
97</span><span class=lnt>26
98</span><span class=lnt>27
99</span><span class=lnt>28
100</span><span class=lnt>29
101</span><span class=lnt>30
102</span><span class=lnt>31
103</span><span class=lnt>32
104</span><span class=lnt>33
105</span><span class=lnt>34
106</span><span class=lnt>35
107</span><span class=lnt>36
108</span><span class=lnt>37
109</span><span class=lnt>38
110</span><span class=lnt>39
111</span><span class=lnt>40
112</span><span class=lnt>41
113</span><span class=lnt>42
114</span><span class=lnt>43
115</span><span class=lnt>44
116</span><span class=lnt>45
117</span><span class=lnt>46
118</span><span class=lnt>47
119</span><span class=lnt>48
120</span><span class=lnt>49
121</span><span class=lnt>50
122</span><span class=lnt>51
123</span><span class=lnt>52
124</span><span class=lnt>53
125</span><span class=lnt>54
126</span><span class=lnt>55
127</span><span class=lnt>56
128</span><span class=lnt>57
129</span><span class=lnt>58
130</span><span class=lnt>59
131</span><span class=lnt>60
132</span><span class=lnt>61
133</span><span class=lnt>62
134</span><span class=lnt>63
135</span><span class=lnt>64
136</span><span class=lnt>65
137</span><span class=lnt>66
138</span><span class=lnt>67
139</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-js data-lang=js><span class=line><span class=cl><span class=nx>initMermaid</span><span class=p>()</span> <span class=p>{</span>
140</span></span><span class=line><span class=cl>  <span class=k>if</span> <span class=p>(</span><span class=o>!</span><span class=k>this</span><span class=p>.</span><span class=nx>config</span><span class=p>.</span><span class=nx>mermaid</span><span class=p>)</span> <span class=k>return</span><span class=p>;</span>
141</span></span><span class=line><span class=cl>
142</span></span><span class=line><span class=cl>  <span class=kr>const</span> <span class=nx>themes</span> <span class=o>=</span> <span class=k>this</span><span class=p>.</span><span class=nx>config</span><span class=p>.</span><span class=nx>mermaid</span><span class=p>.</span><span class=nx>themes</span> <span class=o>??</span> <span class=p>[</span><span class=s1>&#39;default&#39;</span><span class=p>,</span> <span class=s1>&#39;dark&#39;</span><span class=p>];</span>
143</span></span><span class=line><span class=cl>  <span class=kd>let</span> <span class=nx>processing</span> <span class=o>=</span> <span class=kc>
143false</span><span class=p>;</span>
144</span></span><span class=line><span class=cl>  <span class=kd>let</span> <span class=nx>delayTask</span> <span class=o>=</span> <span class=kc>null</span><span class=p>;</span>
145</span></span><span class=line><span class=cl>
146</span></span><span class=line><span class=cl>  <span class=kr>const</span> <span class=nx>loadMermaid</span> <span class=o>=</span> <span class=kr>async</span> <span class=p>()</span> <span class=p>=&gt;</span> <span class=p>{</span>
147</span></span><span class=line><span class=cl>    <span class=nx>processing</span> <span class=o>=</span> <span class=kc>true</span><span class=p>;</span>
148</span></span><span class=line><span class=cl>    <span class=c1>// https://mermaid.js.org/config/schema-docs/config.html
149</span></span></span><span class=line><span class=cl>    <span class=nb>window</span><span class=p>.</span><span class=nx>mermaid</span><span class=p>.</span><span class=nx>initialize</span><span class=p>({</span>
150</span></span><span class=line><span class=cl>      <span class=nx>startOnLoad</span><span class=o>:</span> <span class=kc>false</span><span class=p>,</span>
151</span></span><span class=line><span class=cl>      <span class=nx>darkMode</span><span class=o>:</span> <span class=k>this</span><span class=p>.</span><span class=nx>isDark</span><span class=p>,</span>
152</span></span><span class=line><span class=cl>      <span class=nx>theme</span><span class=o>:</span> <span class=k>this</span><span class=p>.</span><span class=nx>isDark</span> <span class=o>?</span> <span class=nx>themes</span><span class=p>[</span><span class=mi>1</span><span class=p>]</span> <span class=o>:</span> <span class=nx>themes</span><span class=p>[</span><span class=mi>0</span><span class=p>],</span>
153</span></span><span class=line><span class=cl>      <span class=nx>securityLevel</span><span class=o>:</span> <span class=k>this</span><span class=p>.</span><span class=nx>config</span><span class=p>.</span><span class=nx>mermaid</span><span class=p>.</span><span class=nx>securityLevel</span><span class=p>,</span>
154</span></span><span class=line><span class=cl>      <span class=nx>look</span><span class=o>:</span> <span class=k>this</span><span class=p>.</span><span class=nx>config</span><span class=p>.</span><span class=nx>mermaid</span><span class=p>.</span><span class=nx>look</span><span class=p>,</span>
155</span></span><span class=line><span class=cl>      <span class=nx>fontFamily</span><span class=o>:</span> <span class=k>this</span><span class=p>.</span><span class=nx>config</span><span class=p>.</span><span class=nx>mermaid</span><span class=p>.</span><span class=nx>fontFamily</span><span class=p>,</span>
156</span></span><span class=line><span class=cl>      <span class=nx>altFontFamily</span><span class=o>:</span> <span class=k>this</span><span class=p>.</span><span class=nx>config</span><span class=p>.</span><span class=nx>mermaid</span><span class=p>.</span><span class=nx>fontFamily</span>
157</span></span><span class=line><span class=cl>    <span class=p>});</span>
158</span></span><span class=line><span class=cl>    <span class=kr>await</span> <span class=nb>window</span><span class=p>.</span><span class=nx>mermaid</span><span class=p>.</span><span class=nx>run</span><span class=p>({</span>
159</span></span><span class=line><span class=cl>      <span class=nx>querySelector</span><span class=o>:</span> <span class=s1>&#39;.mermaid&#39;</span><span class=p>,</span>
160</span></span><span class=line><span class=cl>      <span class=nx>suppressErrors</span><span class=o>:</span> <span class=kc>true</span><span class=p>,</span>
161</span></span><span class=line><span class=cl>    <span class=p>});</span>
162</span></span><span class=line><span class=cl>    <span class=nx>processing</span> <span class=o>=</span> <span class=kc>false</span><span class=p>;</span>
163</span></span><span class=line><span class=cl>    <span class=k>if</span> <span class=p>(</span><span class=nx>delayTask</span> <span class=o>&amp;&amp;</span> <span class=k>typeof</span> <span class=nx>delayTask</span> <span class=o>===</span> <span class=s1>&#39;function&#39;</span><span class=p>)</span> <span class=p>{</span>
164</span></span><span class=line><span class=cl>
164      <span class=nx>delayTask</span><span class=p>();</span>
165</span></span><span class=line><span class=cl>      <span class=nx>delayTask</span> <span class=o>=</span> <span class=kc>null</span><span class=p>;</span>
166</span></span><span class=line><span class=cl>      <span class=c1>// console.log(&#39;Delayed task executed&#39;);
167</span></span></span><span class=line><span class=cl>    <span class=p>}</span>
168</span></span><span class=line><span class=cl>  <span class=p>};</span>
169</span></span><span class=line><span class=cl>
170</span></span><span class=line><span class=cl>  <span class=kr>const</span> <span class=nx>reloadMermaid</span> <span class=o>=</span> <span class=kr>async</span> <span class=p>()</span> <span class=p>=&gt;</span> <span class=p>{</span>
171</span></span><span class=line><span class=cl>    <span class=kr>await</span> <span class=k>this</span><span class=p>.</span><span class=nx>util</span><span class=p>.</span><span class=nx>forEach</span><span class=p>(</span><span class=nb>document</span><span class=p>.</span><span class=nx>querySelectorAll</span><span class=p>(</span><span class=s1>&#39;.mermaid[data-processed]&#39;</span><span class=p>),</span> <span class=p>(</span><span class=nx>el</span><span class=p>)</span> <span class=p>=&gt;</span> <span class=p>{</span>
172</span></span><span class=line><span class=cl>      <span class=nx>el</span><span class=p>.</span><span class=nx>removeAttribute</span><span class=p>(</span><span class=s1>&#39;data-processed&#39;</span><span class=p>);</span>
173</span></span><span class=line><span class=cl>      <span class=nx>el</span><span class=p>.</span><span class=nx>parentElement</span><span class=p>.</span><span class=nx>replaceChild</span><span class=p>(</span><span class=nx>el</span><span class=p>.</span><span class=nx>nextElementSibling</span><span class=p>.</span><span class=nx>content</span><span class=p>.</span><span class=nx>cloneNode</span><span class=p>(</span><span class=kc>true</span><span class=p>),</span> <span class=nx>el</span><span class=p>);</span>
174</span></span><span class=line><span class=cl>    <span class=p>});</span>
175</span></span><span class=line><span class=cl>    <span class=kr>await</span> <span class=nx>loadMermaid</span><span class=p>();</span>
176</span></span><span class=line><span class=cl>  <span class=p>};</span>
177</span></span><span class=line><span class=cl>
178</span></span><span class=line><span class=cl>  <span class=kr>const</span> <span class=nx>waitForMermaid</span> <span class=o>=</span> <span class=p>()</span> <span class=p>=&gt;</span> <span class=p>{</span>
179</span></span><span class=line><span class=cl>    <span class=k>return</span> <span class=k>new</span> <span class=nb>Promise</span><span class=p>((</span><span class=nx>resolve</span><span class=p>)</span> <span class=p>=&gt;</span> <span class=p>{</span>
180</span></span><span class=line><span class=cl>      <span class=kr>const</span> <span class=nx>timer</span> <span class=o>=</span> <span class=nx>setInterval</span><span class=p>(()</span> <span class=p>=&gt;</span> <span class=p>{</span>
181</span></span><span class=line><span class=cl>        <span class=k>if</span> <span class=p>(</span><span class=nb>window</span><span class=p>.</span><span class=nx>mermaid</span> <span class=o>&amp;&amp;</span> <span class=nb>window</span><span class=p>.</span><span class=nx>mermaid</span><span class=p>.</span><span class=nx>initialize</span><span class=p>)</span> <span class=p>{</span>
182</span></span><span class=line><span class=cl>          <span class=nx>clearInterval</span><span class=p>(</span><span class=nx>timer</span><span class=p>);</span>
183</span></span><span class=line><span class=cl>          <span class=nx>resolve</span><span class=p>();</span>
184</span></span><span class=line><span class=cl>        <span class=p>}</span>
185</span></span><span class=line><span class=cl>      <span class=p>},</span> <span class=mi>100</span><span class=p>);</span>
186</span></span><span class=line><span class=cl>    <span class=p>});</span>
187</span></span><span class=line><span class=cl>  <span class=p>};</span>
188</span></span><span class=line><span class=cl>
189</span></span><span class=line><span class=cl>  <span class=nx>waitForMermaid</span><span class=p>().</span><span class=nx>then</span><span class=p>(()</span> <span class=p>=&gt;</span> <span class=p>{</span>
190</span></span><span class=line><span class=cl>    <span class=nx>loadMermaid</span><span class=p>();</span>
191</span></span><span class=line><span class=cl>    <span class=k>this</span><span class=p>.</span><span class=nx>switchThemeEventSet</span><span class=p>.</span><span class=nx>add</span><span class=p>(()</span> <span class=p>=&gt;</span> <span class=p>{</span>
192</span></span><span class=line><span class=cl>
192      <span class=k>if</span> <span class=p>(</span><span class=nx>processing</span><span class=p>)</span> <span class=p>{</span>
193</span></span><span class=line><span class=cl>        <span class=nx>console</span><span class=p>.</span><span class=nx>warn</span><span class=p>(</span><span class=s1>&#39;Mermaid is still processing, delaying the reload.&#39;</span><span class=p>);</span>
194</span></span><span class=line><span class=cl>        <span class=nx>delayTask</span> <span class=o>=</span> <span class=nx>reloadMermaid</span><span class=p>;</span>
195</span></span><span class=line><span class=cl>        <span class=k>return</span><span class=p>;</span>
196</span></span><span class=line><span class=cl>      <span class=p>}</span>
197</span></span><span class=line><span class=cl>      <span class=c1>// console.log(&#39;reload immediately&#39;);
198</span></span></span><span class=line><span class=cl>      <span class=nx>reloadMermaid</span><span class=p>().</span><span class=k>catch</span><span class=p>(</span><span class=nx>console</span><span class=p>.</span><span class=nx>error</span><span class=p>);</span>
199</span></span><span class=line><span class=cl>    <span class=p>});</span>
200</span></span><span class=line><span class=cl>
201</span></span><span class=line><span class=cl>    <span class=k>this</span><span class=p>.</span><span class=nx>beforeprintEventSet</span><span class=p>.</span><span class=nx>add</span><span class=p>(()</span> <span class=p>=&gt;</span> <span class=p>{</span>
202</span></span><span class=line><span class=cl>      <span class=c1>// Optionally set theme to &#39;neutral&#39; for printing if required
203</span></span></span><span class=line><span class=cl>    <span class=p>});</span>
204</span></span><span class=line><span class=cl>  <span class=p>})</span>
205</span></span><span class=line><span class=cl><span class=p>}</span></span></span></code></pre></td></tr></table></div><button type=button class=code-expand-btn aria-label=展开或折叠代码块><i class="fa-solid fa-angles-down" aria-hidden=true></i></button></div></div><p>为了缓解闪屏问题,利用 CSS 增加一个 Loading 效果,过度一下。</p><div class="code-block highlight" data-mode=classic data-copyable=true data-open=false><div class=chroma><div class="code-header language-scss"><span class=code-title><i class="arrow fa-solid fa-chevron-down" aria-hidden=true></i></span><button type=button class=ellipses-btn aria-label="Show more options"><i class="fa-solid fa-ellipsis-h" aria-hidden=true></i></button><button type=button class="action-btn line-nos-btn" aria-label=切换行号 title=切换行号><i class="fa-solid fa-list-ol" aria-hidden=true></i></button><button type=button class="action-btn line-wrap-btn" aria-label=切换自动换行 title=切换自动换行><i class="fa-solid fa-right-left" aria-hidden=true></i></button><button type=button class="action-btn copy-btn" aria-label=复制到剪贴板 title=复制到剪贴板 data-copied-text=已复制><i class="fa-regular fa-clone" aria-hidden=true></i></button></div><div class=code-wrapper data-max=10 data-line-digit=2 style=--fi-max-shown-lines:10;--fi-line-digit:2;--fi-line-start:1><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt> 1
206</span><span class=lnt> 2
207</span><span class=lnt> 3
208</span><span class=lnt> 4
209</span><span class=lnt> 5
210</span><span class=lnt> 6
211</span><span class=lnt> 7
212</span><span class=lnt> 8
213</span><span class=lnt> 9
214</span><span class=lnt>10
215</span><span class=lnt>11
216</span><span class=lnt>12
217</span><span class=lnt>13
218</span><span class=lnt>14
219</span><span class=lnt>15
220</span><span class=lnt>16
221</span><span class=lnt>17
222</span><span class=lnt>18
223</span><span class=lnt>19
224</span><span class=lnt>20
225</span><span class=lnt>21
226</span><span class=lnt>22
227</span><span class=lnt>23
228</span><span class=lnt>24
229</span><span class=lnt>25
230</span><span class=lnt>26
231</span><span class=lnt>27
232</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-scss data-lang=scss><span class=line><span class=cl><span class=nc>.mermaid</span> <span class=p>{</span>
233</span></span><span class=line><span class=cl>  <span class=na>position</span><span class=o>:</span> <span class=ni>relative</span><span class=p>;</span>
234</span></span><span class=line><span class=cl>  <span class=na>overflow</span><span class=o>:</span> <span class=ni>hidden</span> <span class=k>!important</span><span class=p>;</span>
235</span></span><span class=line><span class=cl>
236</span></span><span class=line><span class=cl>  <span class=k>&amp;</span><span class=o>[</span><span class=nt>data-processed</span><span class=o>]</span> <span class=p>{</span>
237</span></span><span class=line><span class=cl>    <span class=na>text-align</span><span class=o>:</span> <span class=ni>
237center</span><span class=p>;</span>
238</span></span><span class=line><span class=cl>  <span class=p>}</span>
239</span></span><span class=line><span class=cl>
240</span></span><span class=line><span class=cl>  <span class=k>&amp;</span><span class=nd>:not</span><span class=o>([</span><span class=nt>data-processed</span><span class=o>])</span><span class=nd>::before</span> <span class=p>{</span>
241</span></span><span class=line><span class=cl>    <span class=na>content</span><span class=o>:</span> <span class=s1>&#39;&#39;</span><span class=p>;</span>
242</span></span><span class=line><span class=cl>    <span class=na>position</span><span class=o>:</span> <span class=ni>absolute</span><span class=p>;</span>
243</span></span><span class=line><span class=cl>    <span class=na>top</span><span class=o>:</span> <span class=mi>0</span><span class=p>;</span>
244</span></span><span class=line><span class=cl>    <span class=na>left</span><span class=o>:</span> <span class=mi>0</span><span class=p>;</span>
245</span></span><span class=line><span class=cl>    <span class=na>width</span><span class=o>:</span> <span class=mi>100</span><span class=kt>%</span><span class=p>;</span>
246</span></span><span class=line><span class=cl>    <span class=na>height</span><span class=o>:</span> <span class=mi>100</span><span class=kt>%</span><span class=p>;</span>
247</span></span><span class=line><span class=cl>    <span class=na>backdrop-filter</span><span class=o>:</span> <span class=nf>blur</span><span class=p>(</span><span class=mi>0</span><span class=mf>.5</span><span class=kt>rem</span><span class=p>);</span>
248</span></span><span class=line><span class=cl>    <span class=na>background-position</span><span class=o>:</span> <span class=ni>center</span><span class=p>;</span>
249</span></span><span class=line><span class=cl>    <span class=na>background-repeat</span><span class=o>:</span> <span class=ni>no-repeat</span><span class=p>;</span>
250</span></span><span class=line><span class=cl>    <span class=na>background-image</span><span class=o>:</span> <span class=nf>var</span><span class=p>(</span><span class=si>#{</span><span class=nv>$rootPrefix</span><span class=si>}</span><span class=n>loading-img</span><span class=p>);</span>
251</span></span><span class=line><span class=cl>    <span class=na>background-size</span><span class=o>:</span> <span class=mi>60</span><span class=kt>px</span><span class=p>;</span>
252</span></span><span class=line><span class=cl>  <span class=p>}</span>
253</span></span><span class=line><span class=cl>
254</span></span><span class=line><span class=cl>  <span class=nt>svg</span> <span class=p>{</span>
255</span></span><span class=line><span class=cl>    <span class=na>max-width</span><span class=o>:</span> <span class=mi>100</span><span class=kt>%</span><span class=p>;</span>
256</span></span><span class=line><span class=cl>    <span class=na>height</span><span class=o>:</span> <span class=ni>auto</span><span class=p>;</span> 
257</span></span><span class=line><span class=cl>  <span class=p>}</span>
258</span></span><span class=line><span class=cl><span class=p>}</span></span></span></code></pre></td></tr></table></div><button type=button class=code-expand-btn aria-label=展开或折叠代码块><i class="fa-solid fa-angles-down" aria-hidden=true></i></button></div></div><p>说实话,虽然勉强达到了目的,这里的 <code>delayTask</code> 和 <code>waitForMermaid()</code> 算得上妥妥的 Dirty Hack。也属实是无奈之举。</p><hr class=awesome-hr><p>睡觉前我灵光乍现,为了避免每次切换主题时都要重新渲染 Mermaid 图表,我尝试一开始直接把 Mermaid 的 Light 和 Dark 主题的两个图都渲染了,然后由 <code>data-theme</code> 控制显示哪个图表。</p><p>尝试后发现 Mermaid 在渲染图时,如果这个元素是 <code>display: none;</code> 则会报错。</p><p>于是,我改成初始化时只渲染 Light/Dark SVG,等到主题切换时才渲染 Dark/Light SVG,并隐藏另一个 SVG。</p><p>这样同一个图只需要渲染两次,后续多次主题切换,就能够通过 CSS 非常丝滑的控制切换了,<a href=https://lruihao.github.io/html-demo/mermaid.html target=_blank rel="external nofollow noopener noreferrer">狠狠戳这里查看效果<i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden=true></i></a>。</p><div class="code-block highlight" data-mode=classic data-copyable=true><div class=chroma><div class="code-header language-html"><span class=code-title><i class="arrow fa-solid fa-chevron-down" aria-hidden=true></i></span><button type=button class=ellipses-btn aria-label="Show more options"><i class="fa-solid fa-ellipsis-h" aria-hidden=true></i></button><button type=button class="action-btn line-nos-btn" aria-label=切换行号 title=切换行号><i class="fa-solid fa-list-ol" aria-hidden=true></i></button><button type=button class="action-btn line-wrap-btn" aria-label=切换自动换行 title=切换自动换行><i class="fa-solid fa-right-left" aria-hidden=true></i></button><button type=button class="action-btn copy-btn" aria-label=复制到剪贴板 title=复制到剪贴板 data-copied-text=已复制>
258<i class="fa-regular fa-clone" aria-hidden=true></i></button></div><div class=code-wrapper data-max=10 data-line-digit=2 style=--fi-max-shown-lines:10;--fi-line-digit:2;--fi-line-start:1><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt> 1
259</span><span class=lnt> 2
260</span><span class=lnt> 3
261</span><span class=lnt> 4
262</span><span class=lnt> 5
263</span><span class=lnt> 6
264</span><span class=lnt> 7
265</span><span class=lnt> 8
266</span><span class=lnt> 9
267</span><span class=lnt>10
268</span><span class=lnt>11
269</span><span class=lnt>12
270</span><span class=lnt>13
271</span><span class=lnt>14
272</span><span class=lnt>15
273</span><span class=lnt>16
274</span><span class=lnt>17
275</span><span class=lnt>18
276</span><span class=lnt>19
277</span><span class=lnt>20
278</span><span class=lnt>21
279</span><span class=lnt>22
280</span><span class=lnt>23
281</span><span class=lnt>24
282</span><span class=lnt>25
283</span><span class=lnt>26
284</span><span class=lnt>27
285</span><span class=lnt>28
286</span><span class=lnt>29
287</span><span class=lnt>30
288</span><span class=lnt>31
289</span><span class=lnt>32
290</span><span class=lnt>33
291</span><span class=lnt>34
292</span><span class=lnt>35
293</span><span class=lnt>36
294</span><span class=lnt>37
295</span><span class=lnt>38
296</span><span class=lnt>39
297</span><span class=lnt>40
298</span><span class=lnt>41
299</span><span class=lnt>42
300</span><span class=lnt>43
301</span><span class=lnt>44
302</span><span class=lnt>45
303</span><span class=lnt>46
304</span><span class=lnt>47
305</span><span class=lnt>48
306</span><span class=lnt>49
307</span><span class=lnt>50
308</span><span class=lnt>51
309</span><span class=lnt>52
310</span><span class=lnt>53
311</span><span class=lnt>54
312</span><span class=lnt>55
313</span><span class=lnt>56
314</span><span class=lnt>57
315</span><span class=lnt>58
316</span><span class=lnt>59
317</span><span class=lnt>60
318</span><span class=lnt>61
319</span><span class=lnt>62
320</span><span class=lnt>63
321</span><span class=lnt>64
322</span><span class=lnt>65
323</span><span class=lnt>66
324</span><span class=lnt>67
325</span><span class=lnt>68
326</span><span class=lnt>69
327</span><span class=lnt>70
328</span><span class=lnt>71
329</span><span class=lnt>72
330</span><span class=lnt>73
331</span><span class=lnt>74
332</span><span class=lnt>75
333</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-html data-lang=html><span class=line><span class=cl><span class=cp>&lt;!DOCTYPE html&gt;</span>
334</span></span><span class=line><span class=cl><span class=p>&lt;</span><span class=nt>html</span> <span class=na>lang</span><span class=o>=</span><span class=s>&#34;en&#34;</span><span class=p>&gt;</span>
335</span></span><span class=line><span class=cl><span class=p>&lt;</span><span class=nt>head</span><span class=p>&gt;</span>
336</span></span><span class=line><span class=cl>  <span class=p>&lt;</span><span class=nt>meta</span> <span class=na>charset</span><span class=o>=</span><span class=s>&#34;UTF-8&#34;</span><span class=p>&gt;</span>
337</span></span><span class=line><span class=cl>  <span class=p>&lt;</span><span class=nt>meta</span> <span class=na>name</span><span class=o>=</span><span class=s>&#34;viewport&#34;</span> <span class=na>content</span><span class=o>=</span><span class=s>&#34;width=device-width, initial-scale=1.0&#34;</span><span class=p>&gt;</span>
338</span></span><span class=line><span class=cl>  <span class=p>&lt;</span><span class=nt>title</span><span class=p>&gt;</span>Mermaid Light/Dark Mode switching<span class=p>&lt;/</span><span class=nt>title</span><span class=p>&gt;</span>
339</span></span><span class=line><span class=cl>  <span class=p>&lt;</span><span class=nt>style</span><span class=p>&gt;</span>
340</span></span><span class=line><span class=cl>    <span class=p>.</span><span class=nc>diagrams-container</span> <span class=p>{</span>
341</span></span><span class=line><span class=cl>      <span class=k>display</span><span class=p>:</span> <span class=kc>flex</span><span class=p>;</span>
342</span></span><span class=line><span class=cl>      <span class=k>justify-content</span><span class=p>:</span> <span class=kc>space</span><span class=o>-</span><span class=n>evenly</span><span class=p>;</span>
343</span></span><span class=line><span class=cl>    <span class=p>}</span>
344</span></span><span class=line><span class=cl>    <span class=p>.</span><span class=nc>mermaid-container</span> <span class=p>{</span>
345</span></span><span class=line><span class=cl>
345      <span class=err>.mermaid-dark</span> <span class=err>{</span>
346</span></span><span class=line><span class=cl>        <span class=k>display</span><span class=p>:</span> <span class=kc>none</span><span class=p>;</span>
347</span></span><span class=line><span class=cl>      <span class=p>}</span>
348</span></span><span class=line><span class=cl>
349</span></span><span class=line><span class=cl>      <span class=o>[</span><span class=nt>data-theme</span><span class=o>=</span><span class=s2>&#34;dark&#34;</span><span class=o>]</span> <span class=o>&amp;</span> <span class=p>{</span>
350</span></span><span class=line><span class=cl>        <span class=err>.mermaid</span> <span class=err>{</span>
351</span></span><span class=line><span class=cl>          <span class=k>display</span><span class=p>:</span> <span class=kc>none</span><span class=p>;</span>
352</span></span><span class=line><span class=cl>        <span class=p>}</span>
353</span></span><span class=line><span class=cl>        <span class=p>.</span><span class=nc>mermaid-dark</span> <span class=p>{</span>
354</span></span><span class=line><span class=cl>          <span class=k>display</span><span class=p>:</span> <span class=kc>block</span><span class=p>;</span>
355</span></span><span class=line><span class=cl>        <span class=p>}</span>
356</span></span><span class=line><span class=cl>      <span class=err>}</span>
357</span></span><span class=line><span class=cl>    <span class=err>}</span>
358</span></span><span class=line><span class=cl>  <span class=p>&lt;/</span><span class=nt>style</span><span class=p>&gt;</span>
359</span></span><span class=line><span class=cl><span class=p>&lt;/</span><span class=nt>head</span><span class=p>&gt;</span>
360</span></span><span class=line><span class=cl><span class=p>&lt;</span><span class=nt>body</span><span class=p>&gt;</span>
361</span></span><span class=line><span class=cl>  <span class=p>&lt;</span><span class=nt>script</span><span class=p>&gt;</span>
362</span></span><span class=line><span class=cl>    <span class=kd>function</span> <span class=nx>toggleTheme</span><span class=p>()</span> <span class=p>{</span>
363</span></span><span class=line><span class=cl>      <span class=kr>const</span> <span class=nx>currentTheme</span> <span class=o>=</span> <span class=nb>document</span><span class=p>.</span><span class=nx>body</span><span class=p>.</span><span class=nx>dataset</span><span class=p>.</span><span class=nx>theme</span><span class=p>;</span>
364</span></span><span class=line><span class=cl>      <span class=kr>const</span> <span class=nx>newTheme</span> <span class=o>=</span> <span class=nx>currentTheme</span> <span class=o>===</span> <span class=s1>&#39;dark&#39;</span> <span class=o>?</span> <span class=s1>&#39;default&#39;</span> <span class=o>:</span> <span class=s1>&#39;dark&#39;</span><span class=p>;</span>
365</span></span><span class=line><span class=cl>      <span class=nb>document</span><span class=p>.</span><span class=nx>body</span><span class=p>.</span><span class=nx>dataset</span><span class=p>.</span><span class=nx>theme</span> <span class=o>=</span> <span class=nx>newTheme</span><span class=p>;</span>
366</span></span><span class=line><span class=cl>    <span class=p>}</span>
367</span></span><span class=line><span class=cl>  <span class=p>&lt;/</span><span class=nt>script</span><span class=p>&gt;</span>
368</span></span><span class=line><span class=cl>  <span class=p>&lt;</span><span class=nt>button</span> <span class=na>id</span><span class=o>=</span><span class=s>&#34;toggler&#34;</span><span class=p>&gt;</span>切换主题<span class=p>&lt;/</span><span class=nt>button</span><span class=p>&gt;</span>
369</span></span><span class=line><span class=cl>  <span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&#34;diagrams-container&#34;</span><span class=p>&gt;</span>
370</span></span><span class=line><span class=cl>    <span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&#34;mermaid-container&#34;</span><span class=p>&gt;</span>
371</span></span><span class=line><span class=cl>    <span class=p>&lt;</span><span class=nt>pre</span> <span class=na>class</span><span class=o>=</span><span class=s>&#34;mermaid&#34;</span><span class=p>&gt;</span>graph TD;
372</span></span><span class=line><span class=cl>    A[开始] --&gt; B{是否完成?};
373</span></span><span class=line><span class=cl>    B -- 是 --&gt; C[结束];
374</span></span><span class=line><span class=cl>    B -- 否 --&gt; D[继续];
375</span></span><span class=line><span class=cl>    D --&gt; B;
376</span></span><span class=line><span class=cl>    <span class=p>&lt;/</span><span class=nt>pre</span><span class=p>&gt;</span>
377</span></span><span class=line><span class=cl>    <span class=p>&lt;</span><span class=nt>pre</span> <span class=na>class</span><span class=o>=</span><span class=s>&#34;mermaid-dark&#34;</span><span class=p>&gt;</span>graph TD;
378</span></span><span class=line><span class=cl>    A[开始] --&gt; B{是否完成?};
379</span></span><span class=line><span class=cl>    B -- 是 --&gt; C[结束];
380</span></span><span class=line><span class=cl>    B -- 否 --&gt; D[继续];
381</span></span><span class=line><span class=cl>    D --&gt; B;
382</span></span><span class=line><span class=cl>    <span class=p>&lt;/</span><span class=nt>pre</span><span class=p>&gt;</span>
383</span></span><span class=line><span class=cl>    <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
384</span></span><span class=line><span class=cl>  <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
385</span></span><span class=line><span class=cl>
386</span></span><span class=line><span class=cl>  <span class=p>&lt;</span><span class=nt>script</span> <span class=na>type</span><span class=o>=</span><span class=s>&#34;module&#34;</span><span class=p>&gt;</span>
387</span></span><span class=line><span class=cl>    <span class=kr>
387import</span> <span class=nx>mermaid</span> <span class=nx>from</span> <span class=s1>&#39;https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs&#39;</span><span class=p>;</span>
388</span></span><span class=line><span class=cl>
389</span></span><span class=line><span class=cl>    <span class=kr>async</span> <span class=kd>function</span> <span class=nx>loadMermaid</span><span class=p>(</span><span class=nx>theme</span><span class=p>)</span> <span class=p>{</span>
390</span></span><span class=line><span class=cl>      <span class=kr>const</span> <span class=nx>isDark</span> <span class=o>=</span> <span class=nx>theme</span> <span class=o>===</span> <span class=s1>&#39;dark&#39;</span><span class=p>;</span>
391</span></span><span class=line><span class=cl>      <span class=kr>const</span> <span class=nx>querySelector</span> <span class=o>=</span> <span class=nx>isDark</span> <span class=o>?</span> <span class=s1>&#39;.mermaid-dark&#39;</span> <span class=o>:</span> <span class=s1>&#39;.mermaid&#39;</span><span class=p>;</span>
392</span></span><span class=line><span class=cl>      <span class=nx>mermaid</span><span class=p>.</span><span class=nx>initialize</span><span class=p>({</span> <span class=nx>startOnLoad</span><span class=o>:</span> <span class=kc>false</span><span class=p>,</span> <span class=nx>darkMode</span><span class=o>:</span> <span class=nx>isDark</span><span class=p>,</span> <span class=nx>theme</span> <span class=p>});</span>
393</span></span><span class=line><span class=cl>      <span class=c1>// Mermaid run 函数内部会跳过 data-processed 的元素,所以这样不会重复渲染
394</span></span></span><span class=line><span class=cl>      <span class=kr>await</span> <span class=nx>mermaid</span><span class=p>.</span><span class=nx>run</span><span class=p>({</span> <span class=nx>querySelector</span> <span class=p>});</span>
395</span></span><span class=line><span class=cl>    <span class=p>}</span>
396</span></span><span class=line><span class=cl>
397</span></span><span class=line><span class=cl>    <span class=kr>await</span> <span class=nx>loadMermaid</span><span class=p>(</span><span class=s1>&#39;default&#39;</span><span class=p>)</span>
398</span></span><span class=line><span class=cl>
399</span></span><span class=line><span class=cl>    <span class=nb>document</span><span class=p>.</span><span class=nx>getElementById</span><span class=p>(</span><span class=s1>&#39;toggler&#39;</span><span class=p>).</span><span class=nx>addEventListener</span><span class=p>(</span><span class=s1>&#39;click&#39;</span><span class=p>,</span> <span class=p>()</span> <span class=p>=&gt;</span> <span class=p>{</span>
400</span></span><span class=line><span class=cl>      <span class=kr>const</span> <span class=nx>currentTheme</span> <span class=o>=</span> <span class=nb>document</span><span class=p>.</span><span class=nx>body</span><span class=p>.</span><span class=nx>dataset</span><span class=p>.</span><span class=nx>theme</span> <span class=o>||</span> <span class=s1>&#39;default&#39;</span><span class=p>;</span>
401</span></span><span class=line><span class=cl>      <span class=kr>const</span> <span class=nx>newTheme</span> <span class=o>=</span> <span class=nx>currentTheme</span> <span class=o>===</span> <span class=s1>&#39;dark&#39;</span> <span class=o>?</span> <span class=s1>&#39;default&#39;</span> <span class=o>:</span> <span class=s1>&#39;dark&#39;</span><span class=p>;</span>
402</span></span><span class=line><span class=cl>      <span class=nb>document</span><span class=p>.</span><span class=nx>body</span><span class=p>.</span><span class=nx>dataset</span><span class=p>.</span><span class=nx>theme</span> <span class=o>=</span> <span class=nx>newTheme</span><span class=p>;</span>
403</span></span><span class=line><span class=cl>      <span class=nx>loadMermaid</span><span class=p>(</span><span class=nx>newTheme</span><span class=p>);</span>
404</span></span><span class=line><span class=cl>    <span class=p>});</span>
405</span></span><span class=line><span class=cl>  <span class=p>&lt;/</span><span class=nt>script</span><span class=p>&gt;</span>
406</span></span><span class=line><span class=cl><span class=p>&lt;/</span><span class=nt>body</span><span class=p>&gt;</span>
407</span></span><span class=line><span class=cl><span class=p>&lt;/</span><span class=nt>html</span><span class=p>&gt;</span></span></span></code></pre></td></tr></table></div><button type=button class=code-expand-btn aria-label=展开或折叠代码块><i class="fa-solid fa-angles-down" aria-hidden=true></i></button></div></div><h2 class=heading-element id=小结与选型建议><span>小结与选型建议</span>
408<a href=#%e5%b0%8f%e7%bb%93%e4%b8%8e%e9%80%89%e5%9e%8b%e5%bb%ba%e8%ae%ae class=heading-mark>
408<svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5.0 114.95 4.95l-2.5 2.5a3.5 3.5.0 01-4.95.0.751.751.0 01.018-1.042.751.751.0 011.042-.018 1.998 1.998.0 002.83.0l2.5-2.5a2.002 2.002.0 00-2.83-2.83l-1.25 1.25a.751.751.0 01-1.042-.018.751.751.0 01-.018-1.042zm-4.69 9.64a1.998 1.998.0 002.83.0l1.25-1.25a.751.751.0 011.042.018.751.751.0 01.018 1.042l-1.25 1.25a3.5 3.5.0 11-4.95-4.95l2.5-2.5a3.5 3.5.0 014.95.0.751.751.0 01-.018 1.042.751.751.0 01-1.042.018 1.998 1.998.0 00-2.83.0l-2.5 2.5a1.998 1.998.0 000 2.83z"/></svg></a></h2><p>毋庸置疑,想要完美的体验,<strong>方案 3️⃣</strong> 是最优选择, <strong>方案 4️⃣</strong> 作为方案 1️⃣ 的升级版,整体体验也相对较好。</p><div class=table-wrapper><table data-sortable><thead><tr><th>方案</th><th>实现成本</th><th>体验</th><th>是否官方可维护</th></tr></thead><tbody><tr><td>Reinitialize</td><td>低</td><td>中等(闪屏)</td><td>✅</td></tr><tr><td>CSS invert</td><td>极低</td><td>差</td><td>✅</td></tr><tr><td>mermaid.live 热替换</td><td>高</td><td>极佳</td><td>❌</td></tr><tr><td>Reinitialize + CSS</td><td>中</td><td>较好</td><td>✅</td></tr></tbody></table></div><ul><li><strong>内部文档 / 博客 / 小工具</strong> ⇒ 方案 4️⃣</li><li><strong>赶时间的 MVP</strong> ⇒ 方案 2️⃣</li><li><strong>面向 C 端、对体验极端敏感</strong> ⇒ 方案 3️⃣,但要准备长期跟进</li></ul></div><div class=post-reward><div class=comment>Buy me a coffee~</div><input type=checkbox class=reward-input name=reward id=fi-reward hidden>
409<label class=reward-button for=fi-reward><i class="fa-solid fa-qrcode" aria-hidden=true></i>赞赏</label><div class=reward-ways data-mode=fixed><div><img src=/images/alipay.jpg alt="Lruihao 支付宝"><span data-animation>支付宝</span></div><div><img src=/images/wechatpay.jpg alt="Lruihao 微信"><span data-animation>微信</span></div></div></div><div class=post-footer id=post-footer><div class=post-info><div class=post-info-line><div class=post-info-mod><span title="更新于 2025-08-16 14:56:28">更新于 2025-08-16&nbsp;<a class=git-hash href=https://github.com/Lruihao/hugo-blog/commit/429eb0297752c7ee0f47c529cb6b835e8f6a0be0 rel="external nofollow noopener noreferrer" target=_blank title="Docs: 让 Mermaid 图表自动跟随系统深浅色&#10&#10Commit: 429eb0297752c7ee0f47c529cb6b835e8f6a0be0 [429eb02]&#10Author: Cell<[email protected]>&#10Date: 2025-08-16 14:56:28&#10Commit Date: 2025-08-17 14:36:08"><i class="fa-solid fa-hashtag" aria-hidden=true></i>429eb02</a></span></div><div class=post-info-license><span><a rel="license external nofollow noopener noreferrer" href=https://creativecommons.org/licenses/by-nc-sa/4.0/ target=_blank>CC BY-NC-SA 4.0</a></span></div></div><div class=post-info-line><div class=post-info-md><span><a href=/posts/mermaid-theming/index.md title=阅读原始文档 class=link-to-markdown>阅读原始文档</a></span><span><a href="https://github.com/Lruihao/hugo-blog/blob/docs/content/posts/_frontend/mermaid-theming/index.md?plain=1" title=查看源码 target=_blank rel="external nofollow noopener noreferrer" class=link-to-source>查看源码</a></span><span><a href=https://github.com/Lruihao/hugo-blog/edit/docs/content/posts/_frontend/mermaid-theming/index.md title=编辑此页 target=_blank rel="external nofollow noopener noreferrer" class=link-to-edit>编辑此页</a></span><span><a href="https://github.com/Lruihao/hugo-blog/issues/new?title=[BUG]%20%E8%AE%A9+Mermaid+%E5%9B%BE%E8%A1%A8%E8%87%AA%E5%8A%A8%E8%B7%9F%E9%9A%8F%E7%B3%BB%E7%BB%9F%E6%B7%B1%E6%B5%85%E8%89%B2&body=|Field|Value|%0A|-|-|%0A|Title|%E8%AE%A9+Mermaid+%E5%9B%BE%E8%A1%A8%E8%87%AA%E5%8A%A8%E8%B7%9F%E9%9A%8F%E7%B3%BB%E7%BB%9F%E6%B7%B1%E6%B5%85%E8%89%B2|%0A|URL|https://lruihao.cn/posts/mermaid-theming/|%0A|Filename|https://github.com/Lruihao/hugo-blog/blob/docs/content/posts/_frontend/mermaid-theming/index.md?plain=1|" title=报告问题 target=_blank rel="external nofollow noopener noreferrer" class=link-to-report>报告问题</a></span></div><div class=post-info-share><span><a href=javascript:void(0); title="分享到 X" data-sharer=twitter data-url=https://lruihao.cn/posts/mermaid-theming/ data-title="让 Mermaid 图表自动跟随系统深浅色" data-hashtags="invert filter,Mermaid,prefers-color-scheme,FixIt"><i class="fa-brands fa-x-twitter" aria-hidden=true></i></a>
410<a href=javascript:void(0); title="分享到 Facebook" data-sharer=facebook data-url=https://lruihao.cn/posts/mermaid-theming/ data-hashtag="invert filter"><i class="fa-brands fa-facebook-square" aria-hidden=true></i></a>
411<a href=javascript:void(0); title="分享到 Linkedin" data-sharer=linkedin data-url=https://lruihao.cn/posts/mermaid-theming/><i class="fa-brands fa-linkedin" aria-hidden=true></i></a>
412<a href=javascript:void(0); title="分享到 微博" data-sharer=weibo data-url=https://lruihao.cn/posts/mermaid-theming/ data-title="让 Mermaid 图表自动跟随系统深浅色" data-image=/posts/mermaid-theming/featured-image.webp data-ralateuid=liahao><i class="fa-brands fa-weibo" aria-hidden=true></i></a>
413<a href=javascript:void(0); title="分享到 百度" data-sharer=baidu data-url=https://lruihao.cn/posts/mermaid-theming/ data-title="让 Mermaid 图表自动跟随系统深浅色"><i data-svg-src=https://unpkg.com/[email protected]/icons/baidu.svg aria-hidden=true></i></a></span></div></div></div><div class=post-info-more><section class=post-tags><i class="fa-solid fa-tags me-1" aria-hidden=true></i><a href=/tags/invert-filter/ class=post-tag title="标签 - invert filter">invert filter</a><a href=/tags/mermaid/ class=post-tag title="标签 - Mermaid">Mermaid</a><a href=/tags/prefers-color-scheme/ class=post-tag title="标签 - prefers-color-scheme">prefers-color-scheme</a><a href=/tags/fixit/ class=post-tag title="标签 - FixIt">FixIt</a></section><section><span><a href=javascript:void(0); onclick=window.history.back()>返回</a></span>&nbsp;|&nbsp;<span><a href=/>主页</a></span></section></div><div class=post-nav><a href=/posts/wc-01-prologue/ class=post-nav-item rel=prev title=黑盒出å
413…³ãƒ»ä¸‰æŠŠé’¥åŒ™å®šæ±Ÿæ¹–><i class="fa-solid fa-angle-left" aria-hidden=true></i>黑盒出关・三把钥匙定江湖</a><a href=/projects/lruihao/auto-changelog-plus/ class=post-nav-item rel=next title=Lruihao/auto-changelog-plus>Lruihao/auto-changelog-plus<i class="fa-solid fa-angle-right" aria-hidden=true></i></a></div></div><div class=post-footer__after><div class="sm:hidden text-center"><img src=/images/wxmp.webp alt=微信公众号 width=70%></div></div></article><aside class="toc animate__animated animate__fadeIn animate__faster" id=toc-auto aria-label=目录><h2 class=toc-title><span>目录<i class="toc-icon fa-solid fa-angle-down ms-1" aria-hidden=true></i></span>
414<button type=button class=toc-print-btn onclick=event.stopPropagation(),window.print() aria-label=打印><i class="fa-solid fa-print" aria-hidden=true></i></button></h2><div class=toc-content id=toc-content-auto></div></aside></main><div id=comments><div id=giscus class=comment>
414<script src=https://giscus.app/client.js data-repo=Lruihao/hugo-blog data-repo-id data-category=General data-category-id data-mapping=title data-strict=0 data-theme=preferred_color_scheme data-reactions-enabled data-emit-metadata data-input-position data-lang=zh-CN data-loading=lazy crossorigin=anonymous async defer></script>
414</div><noscript>Please enable JavaScript to view the comments powered by <a href=https://giscus.app/ rel="external nofollow noopener noreferrer">giscus</a>.</noscript></div><footer class=footer><div class=footer-container><div class="footer-line powered order-1">由 <a href="https://github.com/gohugoio/hugo?v=0.165.0" target=_blank rel="external nofollow noopener noreferrer" title="Hugo 0.165.0"><img class=hugo-icon src=/images/hugo.min.svg alt="Hugo logo"> Hugo</a> 强力驱动 | 主题 - <a href="https://github.com/hugo-fixit/FixIt?v=v1.0.0-alpha-mtcmp1fx" target=_blank rel=external title="FixIt v1.0.0-alpha-mtcmp1fx"><img class=fixit-icon src=/images/fixit.min.svg alt="FixIt logo"> FixIt</a></div><div class="footer-line copyright order-2" itemscope itemtype=http://schema.org/CreativeWork><i class="fa-regular fa-copyright" aria-hidden=true></i>
415<span itemprop=copyrightYear>2018 - 2026</span><span class=author itemprop=copyrightHolder>
416<a href=https://github.com/Lruihao target=_blank rel="external nofollow noopener noreferrer">Lruihao</a></span><span class="license footer-divider"><a rel="license external nofollow noopener noreferrer" href=https://creativecommons.org/licenses/by-nc-sa/4.0/ target=_blank>CC BY-NC-SA 4.0</a></span></div><div class="footer-line statistics order-3"><span class=site-time title=网站运行中……><i class="fa-solid fa-heartbeat animate-icon" aria-hidden=true></i><span class="ms-1 hidden">博客已运行</span><span class="run-times tabular-nums lining-nums ms-1">网站运行中……</span></span></div><div class="footer-line visitor order-4"><span id=busuanzi_container_site_uv title=总访客数><i class="fa-regular fa-user me-1" aria-hidden=true></i><span id=busuanzi_value_site_uv><i class="fa-solid fa-spinner fa-spin" aria-hidden=true></i></span></span><span id=busuanzi_container_site_pv class=footer-divider title=总访问量><i class="fa-regular fa-eye me-1" aria-hidden=true></i><span id=busuanzi_value_site_pv><i class="fa-solid fa-spinner fa-spin" aria-hidden=true></i></span></span></div></div></footer></div><div class=widgets><a href=https://github.com/Lruihao/hugo-blog title="在 GitHub 上查看源码,订阅请点 Watch~" target=_blank rel="external nofollow" class="github-corner end max-sm:hidden"><svg viewBox="0 0 250 250" aria-hidden="true" width="56" height="56"><path d="M0 0 115 115h15l12 27L250 250V0z"/><path d="M128.3 109C113.8 99.7 119 89.6 119 89.6 122 82.7 120.5 78.6 120.5 78.6 119.2 72 123.4 76.3 123.4 76.3 127.3 80.9 125.5 87.3 125.5 87.3 122.9 97.6 130.6 101.9 134.4 103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"/><path d="M115 115C114.9 115.1 118.7 116.5 119.8 115.4l13.9-13.8C136.9 99.2 139.9 98.4 142.2 98.6 133.8 88 127.5 74.4 143.8 58 148.5 53.4 154 51.2 159.7 51 160.3 49.4 163.2 43.6 171.4 40.1 171.4 40.1 176.1 42.5 178.8 56.2 183.1 58.6 187.2 61.8 190.9 65.4 194.5 69 197.7 73.2 200.1 77.6 213.8 80.2 216.3 84.9 216.3 84.9 212.7 93.1 206.9 96 205.4 96.6 205.1 102.4 203 107.8 198.3 112.5 181.9 128.9 168.3 122.5 157.7 114.1 157.9 116.9 156.7 120.9 152.7 124.9L141 136.5C139.8 137.7 141.6 141.9 141.8 141.8z" fill="currentColor" class="octo-body"/></svg></a><div id=mask></div><dialog id=nav-dialog aria-labelledby=nav-dialog-title closedby=any><button type=button class=nav-close-btn aria-label="Close 导航"><i class="fa-solid fa-xmark fa-lg" aria-hidden=true></i></button><div class=toc><h2 class=toc-title id=nav-dialog-title>导航</h2><div class=toc-content id=toc-content-drawer></div></div></dialog><dialog id=search-dialog class=search-dialog aria-label=搜索 closedby=any><div class=search-modal><div class=search-modal-header><span class=search-delimiter></span>
417<button type=button class=search-close-btn aria-label="Close Search Dialog"><i class="fa-solid fa-xmark" aria-hidden=true></i></button></div><div class=search-source-footer><div class=search-shortcuts><span class=search-shortcut><kbd><i class=lucide-arrow-up aria-hidden=true></i></kbd>
418<kbd><i class=lucide-arrow-down aria-hidden=true></i></kbd>
419切换
420</span><span class=search-shortcut><kbd><i class=lucide-corner-down-left aria-hidden=true></i></kbd>
421选择
422</span><span class=search-shortcut><kbd>ESC</kbd>
423关闭</span></div><span class=search-engine>搜索引擎 <a href=https://www.algolia.com/ target=_blank rel="external nofollow noopener noreferrer"><i class="fa-brands fa-algolia" aria-hidden=true></i>
424algolia</a></span></div></div></dialog><div class=reading-progress-bar style=inset-inline-start:0;top:0;--fi-bg-progress:#8581dd;--fi-bg-progress-dark:#fff></div><div class=sw-update-notification><div class=sw-update-content><p class=sw-update-title>发现新版本</p><p class=sw-update-text>当前站点有新版本可用。</p></div><button type=button class=sw-update-btn>刷新</button></div><div class=fixed-buttons><button type=button class="fixed-button back-to-top animate__faster hidden" aria-label=回到顶部><i class="fa-solid fa-arrow-up" aria-hidden=true></i><svg viewBox="0 0 100 100"><circle class="bg" cx="50" cy="50" r="50"/><circle class="progress" cx="50" cy="50" r="50"/></svg></button>
424<button type=button id=nav-drawer-button class="fixed-button nav-drawer-button hidden" aria-label=导航 aria-controls=nav-dialog aria-expanded=false><i class="fa-solid fa-bars" aria-hidden=true></i></button><button type=button class="fixed-button view-comments hidden" aria-label=查看评论><i class="fa-solid fa-comment" aria-hidden=true></i></button></div><noscript><div class="noscript-warning bg-danger text-white text-base font-bold fixed text-center inset-x-0 bottom-0 w-full z-fixed">该网站在启用 JavaScript 的情况下效果最佳。</div></noscript></div><link rel=stylesheet href=/css/santa-hat.fixit.min.min.css><link rel=stylesheet href=https://unpkg.com/[email protected]/css/lightgallery-bundle.min.css><link rel=stylesheet href=https://unpkg.com/[email protected]/build/cookieconsent.min.css><link rel=stylesheet href=https://unpkg.com/[email protected]/themes/blue/pace-theme-minimal.css><link rel=stylesheet href=https://ai.zhheo.com/static/public/postChatUser_summary.min.css>
424<script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.js?features=Array.prototype.fill%2CArray.prototype.find%2CArray.from%2CIntersectionObserver%2CMath.sign%2CObject.assign%2CPromise%2CObject.entries%2Chtml5shiv%2CObject.values%2Cfetch%2CElement.prototype.after"></script>
424<script src=/js/lib/giscus.min.js defer></script>
424<script src=https://unpkg.com/@algolia/[email protected]/dist/umd/index.production.js defer></script>
424<script src=https://unpkg.com/[email protected]/dist/lite/builds/browser.umd.js defer></script>
424<script src=https://unpkg.com/[email protected]/instantpage.js async defer type=module></script>
424<script src=https://unpkg.com/@panzoom/[email protected]/dist/panzoom.min.js defer></script>
424<script src=https://unpkg.com/[email protected]/lightgallery.min.js defer></script>
424<script src=https://unpkg.com/[email protected]/plugins/thumbnail/lg-thumbnail.min.js defer></script>
424<script src=https://unpkg.com/[email protected]/plugins/zoom/lg-zoom.min.js defer></script>
424<script src=/js/lib/lightgallery.min.js defer></script>
424<script src=https://unpkg.com/[email protected]/sharer.min.js async defer></script>
424<script src=https://unpkg.com/[email protected]/build/cookieconsent.min.js defer></script>
424<script src=/js/lib/cookieconsent.min.js defer></script>
424<script src=https://unpkg.com/[email protected]/dist/browser/pangu.min.js defer></script>
424<script src=/js/lib/pangu.min.js defer></script>
424<script src=https://unpkg.com/[email protected]/dist/cell-tooltip.umd.js defer></script>
424<script src=https://unpkg.com/[email protected]/src/watermark.js defer></script>
424<script src=/js/lib/watermark.min.js defer></script>
424<script src=/js/lib/table-sort.min.js defer></script>
424<script src=https://vercount.one/js async defer></script>
424<script src=https://unpkg.com/[email protected]/pace.min.js async defer></script>
424<script src=/js/config/post-chat/f4a09c8a767f701b81df89c1ef7b3512.js defer></script>
424<script src=https://ai.zhheo.com/static/public/tianli_gpt.min.js defer></script>
424<script src=/js/config/f4a09c8a767f701b81df89c1ef7b3512.min.js defer></script>
424<script src=/js/lib/file-tree.min.js defer></script>
424<script src=/js/lib/mermaid-bootstrap.min.js defer type=module></script>
424<script src=/js/main.min.js defer></script>
424<script src=/js/flyfish.min.min.js defer></script>
424<script src=/js/santa-hat.fixit.min.min.js async defer></script>
424<script src=/lib/translate.min.js defer></script>
424<script src=/js/config/auto-translate/f4a09c8a767f701b81df89c1ef7b3512.js defer></script>
424<script src=/js/translate.fixit.min.js defer></script>
424<script src=/js/custom.min.js defer></script>
424<script async defer data-website-id=4049c0b0-87c9-4573-8ae5-d84449e40e05 src=https://cloud.umami.is/script.js></script>
424</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.