画像のダークモード
Github Markdownのメディアアセットを配色で区別したい場合は、構文を更新することでこれが可能になります。
これまでは、img-tagを使用して、リポジトリまたはリモートの宛先から画像をレンダリングするようにマークダウンインタープリターに指示することができました。画像でダークモードに適応するために、最新のHTML画像タグを使用することもできます。
Githubマークダウンをダークモードに適応させる方法
次のコード例は、ユーザーの好みの配色、つまりダークモードまたはライトモードに基づいて、画像に2つのバリエーションを含める方法を示しています。構文はHTML5およびCSSと同等です。
<!--
Note we're using the same HTML-sytnax for
constraint-based assets as you would do on
the web.
-->
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://path-to-your-dark-mode-image.webp">
<img alt="A single image caption for both variants" src="https://path-to-default-light-mode-image.webp">
</picture>
ご覧のとおり、いくつかの変更を加えることで、画像をダークモードにも適応させることができます。一般的なMarkdown要素は、何もしなくてもダークモードをすでに完全にサポートしているため、これはGithubMarkdownの機能への歓迎すべき追加です。
