GitHubのREADMEでテーマ(ダーク・ライト)により画像を出し分ける方法

GitHubのREADMEでテーマ(ダーク・ライト)により画像を出し分ける方法についてまとめます。

やりたいこと

GitHubのREADMEでは、マークダウンやHTMLタグを使って画像を表示することができます。
今回はこの画像を、ユーザにより設定されているテーマ(ダークテーマかライトテーマ)によって以下のように出し分けることを考えます。

Specify theme context for images in Markdownより引用

マークダウンの場合

テーマによる画像の出し分けは画像URLの後にそれぞれ#gh-dark-mode-only#gh-light-mode-onlyを付けることで実現できます。
マークダウンの場合は以下のような感じです。

![GitHub-Mark-Light](https://user-images.githubusercontent.com/3369400/139447912-e0f43f33-6d9f-45f8-be46-2df5bbc91289.png#gh-dark-mode-only)
![GitHub-Mark-Dark](https://user-images.githubusercontent.com/3369400/139448065-39a229ba-4b06-434b-bc67-616e2ed80c8f.png#gh-light-mode-only)

HTMLタグの場合

HTMLタグを使う場合にも同様に画像URLの後に#gh-dark-mode-only#gh-light-mode-onlyをつけます。

<img width=500 src="https://user-images.githubusercontent.com/3369400/139447912-e0f43f33-6d9f-45f8-be46-2df5bbc91289.png#gh-dark-mode-only" alt="GitHub-Mark-Light">
<img width=500 src="https://user-images.githubusercontent.com/3369400/139448065-39a229ba-4b06-434b-bc67-616e2ed80c8f.png#gh-light-mode-only" alt="GitHub-Mark-Dark">

参考

github.blog