🐕
GitHubでMermaid形式の図を書くときライトモードでもダークモードでも適切な色をつけたい
GitHub上ではMermaid形式の図が気軽に書けます。「```mermaid」から始まるコードブロックはMermaid形式で解釈されます。(もちろんZennでも書けます)
たとえば下記のような図を簡単に書くことができます。
ところで、GitHubはダークモードをサポートしており、単純に色指定をしたMermaidの図はダークモードで悲惨なことになります。上の図をダークモードで見ると、たとえば以下のような見え方になったりします。
ピンクと青の長方形内の文字が非常に読みにくいですね。コントラスト比が低すぎる組み合わせになっています。
色指定していない部分(地のテキストや矢印の色)はモードに合わせて適切な色になるのですが、明示的に色指定をした部分は一方のモードに合わない色になってしまいます。ダークモードでもライトモードでも適切なコントラスト比を確保できる色は存在しません。
この解決策はいくつかあるのですが、一番単純なのは「色指定に半透明を使う」ことです。具体的には、Mermaidフォーマット中で下記のような色指定をするとダークモードでもライトモードでも見やすい色が表示されるようになります。
style A fill:#d000d088,stroke-width:2px
style E fill:#006cff88,stroke-width:2px
style F fill:#006cff88,stroke-width:2px
以下は、これを適用した時のダークモードでの見え方です。(ライトモードでの見え方は最初の図と変わりません)
これなら両モードに対応できたと言えるんじゃないでしょうか。これが流行して生成AIがこの方式のMermaidを出力するようになったら最高だと思ってます。
Discussion