GitHubのREADMEでテーマ(ダーク・ライト)により画像を出し分ける方法についてまとめます。
やりたいこと
GitHubのREADMEでは、マークダウンやHTMLタグを使って画像を表示することができます。
今回はこの画像を、ユーザにより設定されているテーマ(ダークテーマかライトテーマ)によって以下のように出し分けることを考えます。
マークダウンの場合
テーマによる画像の出し分けは画像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">