Github Markdown prefers-color-scheme 媒体查询功能

/post/github-theme article cover image

参考官方示例

prefers-color-scheme

在-markdown-中为图像指定主题上下文

现在GitHub markdown支持使用 prefers-color-scheme 媒体查询功能结合picture元素的media属性表示，根据主题指定加载对应深浅图片

md
# 测试示例
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/25423296/163456776-7f95b81a-f1ed-45f7-b7ab-8fa810d529fa.png">
  <img alt="Shows an illustrated sun in light color mode and a moon with stars in dark color mode." src="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
</picture>

同理github-readme中的-stats同样可以同时使用深浅主题

md
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://github-readme-stats.vercel.app/api?username=yourusername&theme=darktheme">
  <img src="https://github-readme-stats.vercel.app/api?username=yourusername&theme=default">
</picture>