如何利用 HTML 的 `<picture>` 元素，在 GitHub Markdown 中根据用户主题模式

当开发者切换到 GitHub 的暗黑模式（或反之亦然）时，标准图片可能会显得不协调，背景太亮或颜色冲突。

而不是强制使用一刀切的图片，你可以根据主题调整你的视觉效果，使其无缝融合。这是一个小改变，但可以使你的项目看起来更加精致。

一个片段，两种主题！

这是你可以复制到你的 README（或任何 Markdown 文件）中的魔法片段：

ini 复制代码

<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>

虽然我们说这是魔法，但让我们揭开幕后看看它是如何工作的：

<picture> 标签允许你为不同的场景定义多个图片源。
The <source media="..."> attribute matches the user's color scheme.
- 当 media="(prefers-color-scheme: dark)" 时，浏览器会在 GitHub 处于暗黑模式时加载 srcset 图片。
- 类似地，当 media="(prefers-color-scheme: light)" 时，浏览器会在 GitHub 处于光明模式时加载 srcset 图片。
如果浏览器不支持 <picture> 元素，或者用户的系统不符合任何定义的媒体查询，将使用 fallback <img> 标签。

你可以在你的仓库 README 文件、托管在 GitHub 上的文档，以及任何其他在 GitHub.com 上渲染的 Markdown 文件中使用这种方法！

Demo

没有什么比一个演示来帮助你入门更好了。这里是如何在实践中实现的：

GitHub 博客

@Cassidy Williams

一句话总结

介绍如何利用 HTML 的 <picture> 元素，在 GitHub Markdown 中根据用户主题模式（黑暗/光明）动态切换图片。

摘要

本文介绍一种优化 GitHub 仓库 README 文件及其他 Markdown 文档中图片显示效果的方法，使其能够根据用户的 GitHub 主题设置（黑暗模式或光明模式）自动调整。通过使用 HTML 的 <picture> 元素，开发者可以指定不同的图片资源对应不同的主题模式。文章提供了具体的代码示例，解释了 <picture> 元素的工作原理，包括如何使用 media 属性来检测用户的主题偏好，以及如何在不支持 <picture> 元素的浏览器中提供备用图片。这种方法可以提升 GitHub README 文件的专业性和用户体验，使项目在不同主题下都呈现出最佳视觉效果。

主要内容

1. 使用 <picture> 元素可根据 GitHub 主题动态切换图片
通过 <picture> 标签和 media 属性，可以针对黑暗和光明模式加载不同的图片，提升在不同主题下的视觉效果。
1. source 标签的 media 属性匹配用户颜色方案
media="(prefers-color-scheme: dark)" 匹配黑暗模式，media="(prefers-color-scheme: light)" 匹配光明模式。
1. 提供兼容性方案，确保所有浏览器都能正常显示图片
当浏览器不支持 <picture> 或用户系统不匹配任何 media 查询时，img 标签确保图片正常显示。

精选

GitHub 现已支持黑暗/光明模式，开发者们，让你的 README 图片在这两种主题下都光彩夺目！
告别一刀切，定制视觉效果，与主题无缝融合。
<picture> 标签允许你为不同的场景定义多个图像源。