The GitHub Blog
·
如何在GitHub的Markdown中使图像适应深色模式和浅色模式
💡
原文英文，约300词，阅读约需2分钟。
📝
内容提要
GitHub支持深色和浅色模式，开发者可通过<picture>元素在Markdown文件中根据用户的颜色方案动态切换图像，从而提升项目的视觉效果。示例代码可实现此功能。
🎯
关键要点
- GitHub支持深色和浅色模式，开发者可以根据用户的颜色方案动态切换图像。
- 使用<picture>元素可以提升项目的视觉效果，使图像与主题无缝融合。
- 示例代码展示了如何在Markdown文件中实现动态图像切换。
- 当用户切换到深色模式时，浏览器会加载深色模式图像，反之亦然。
- 如果浏览器不支持<picture>元素，将使用后备的<img>标签。
- 这种方法可以应用于项目的README文件和其他在GitHub上渲染的Markdown文件。
❓
延伸问答
如何在GitHub的Markdown中实现图像的深色和浅色模式切换？
可以使用<picture>元素和<source>标签，根据用户的颜色方案动态切换图像。
使用<picture>元素有什么好处？
使用<picture>元素可以根据用户的颜色方案提升项目的视觉效果，使图像与主题无缝融合。
如果浏览器不支持<picture>元素，会发生什么？
如果浏览器不支持<picture>元素，将使用后备的<img>标签显示默认图像。
在GitHub上使用动态图像切换的场景有哪些？
这种方法可以应用于项目的README文件和其他在GitHub上渲染的Markdown文件。
如何在Markdown文件中插入示例代码？
可以将以下代码复制到Markdown文件中：<picture> <source media="(prefers-color-scheme: dark)" srcset="dark-mode-image.png"> <source media="(prefers-color-scheme: light)" srcset="light-mode-image.png"> <img alt="Fallback image description" src="default-image.png"> </picture>
深色模式和浅色模式对图像的影响是什么？
深色模式和浅色模式可能导致标准图像看起来不协调，因此需要根据模式切换图像以保持视觉一致性。
➡️
