【Mermaid】システムのテーマに合わせてMermaidのテーマを変える

システムのテーマに合わせてMermaidのテーマを変えたい！

概要

今回の記事では、システムのテーマに合わせてMermaidのテーマを変える手順を掲載する。

環境

• Mermaid 10.3.0

手順書

システムがダークテーマならMermaidのテーマをdarkに、システムがライトテーマなららMermaidのテーマをdefaultにする例。

<script src="https://cdn.jsdelivr.net/npm/mermaid@10.3.0/dist/mermaid.min.js"></script>
<script>
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        mermaid.initialize({startOnLoad: true,theme: 'dark',});
    } else {
        mermaid.initialize({startOnLoad: true,theme: 'default',});
    }
</script>

window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matchesでシステムがダークテーマなのかを判定してる。

まとめ（感想文）

システムがダークテーマだとdefaultだと見辛いので、darkにすると吉。