在Github README中获取用户选择的颜色主题

Ham*_*med 5 markdown themes github colors darkmode

是否可以在Github README中获取用户选择的颜色主题?

由于可以在 Github 上选择深色或浅色主题,因此在 README 文件(和其他 Markdowns)上相应地显示图形将很有用。例如,如果选择深色主题,则显示图形的明亮版本,如果选择浅色主题,则显示图形的深色版本。

Von*_*onC 6

这是可能的,因为它从 2022 年 5 月(仍是测试版)开始为您完成,GA 自 2022 年 8 月开始。

在 Markdown (Beta) 中指定图像的主题上下文

<picture>现在,您可以结合使用 HTML 元素和首选颜色方案媒体功能,指定在 Markdown 中显示浅色或深色主题的图像。

例如:

<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>
Run Code Online (Sandbox Code Playgroud)

https://i0.wp.com/user-images.githubusercontent.com/3369400/169278322-d903e32e-f752-4c0f-bf75-72e5a94d0f7b.gif?ssl=1

更改颜色模式的问题评论的动画屏幕截图。内容显示浅色模式下的章鱼和深色模式下的冲锋队猫。


2022 年 8 月:

在 Markdown GA 中指定图像的主题上下文

现在,您可以结合使用 HTML 元素和首选颜色方案媒体功能,指定在 Markdown 中显示浅色或深色主题的图像。

例如:

<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>
Run Code Online (Sandbox Code Playgroud)