如何在 GitHub 上張貼圖片，於淺色主題與深色主題時使用不同圖片？

在 GitHub 上，可以使用 Text Fragment 或者 <picture> 元素的 media 屬性，為淺色主題與深色主題時選用不同的圖片。

在程式專案託管平台 GitHub 上，使用者可以根據個人偏好切換淺色主題或深色主題，而在專案的 README 文件或者 Wiki 中，其實可以在使用 Markdown 張貼圖片的語法中，於圖片連結的末端添加 #gh-dark-mode-only 或 #gh-light-mode-only 這樣的 Text Fragment 來讓使用者使用淺色主題與深色主題瀏覽時，能夠顯示不同的圖片：

![logo](./dark-mode-image.png#gh-dark-mode-only)
![logo](./light-mode-image.png#gh-light-mode-only)

這種方式是在 Markdown 渲染成 HTML 時，讓瀏覽器依據 Text Fragment 進行判斷，來生成適應淺色主題或深色主題的內容，由於 Text Fragment 不會被發送到伺服器端的特性，並不會造成多次請求。

上述這個方式首見於 GitHub 官方部落格 2021-11-24 所發布的一篇文章，然而根據這一則 issue 中，提到官方曾經在文件中表示在圖片連結後方附加 Text Fragment 的方法，將在未來被棄用：

The old method of specifying images based on the theme, by using a fragment appended to the URL (#gh-dark-mode-only or #gh-light-mode-only), is deprecated and will be removed in favor of the new method described above.

雖然目前文件中已經將這段敘述拿掉，並且這個專案倉庫中的範例看起來這種方法仍然能夠正常運作，但還是建議採用 GitHub 官方部落格於 2025-04-18 發布的這篇文章中所述的方式：

<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="image description" src="default-image.png">
</picture>

在這個方法中，使用的並非是 Markdown 語法，而是 HTML 中的 <picture> 元素的 media 屬性，這是一個類似於 CSS 中 Media Query 的方式，可以讓瀏覽器（或者說 User Agnet）依據不同的 source 做出判斷，如果判斷值為 false 則會跳過並繼續判斷下一個元素。

其中的 prefers-color-scheme 便是 CSS 的 Media Query 功能特性，用於偵測使用者是否要求使用淺色或深色主題，此一設定可以在作業系統中或者 User Agent 中調整。