jprdonnelly/docs
1
0
Fork 0
mirror of synced 2026-01-08 03:01:54 -05:00
Code Issues Projects Releases Wiki Activity

Merge pull request #18176 from github/repo-sync

Browse Source 
repo sync
This commit is contained in:
Octomerger Bot
2022-05-24 07:30:28 -05:00
committed by GitHub
parent 645a325eff 4ddbdb2607
commit 9cdb80f972
1 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
content/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax.md
View File

@@ -148,14 +148,19 @@ For more information, see "[Relative Links](#relative-links)."
{% ifversion fpt or ghec or ghes > 3.3 or ghae-issue-5559 %}
### Specifying the theme an image is shown to
You can specify the theme an image is displayed to by appending `#gh-dark-mode-only` or `#gh-light-mode-only` to the end of an image URL, in Markdown.
You can specify the theme an image is displayed for in Markdown by using the HTML `<picture>` element in combination with the `prefers-color-scheme` media feature. We distinguish between light and dark color modes, so there are two options available. You can use these options to display images optimized for dark or light backgrounds. This is particularly helpful for transparent PNG images.
We distinguish between light and dark color modes, so there are two options available. You can use these options to display images optimized for dark or light backgrounds. This is particularly helpful for transparent PNG images.
For example, the following code displays a sun image for light themes and a moon for dark themes:
| Context | URL |
|--------|--------|
| Dark Theme | `![GitHub Light](https://github.com/github-light.png#gh-dark-mode-only)` |
| Light Theme | `![GitHub Dark](https://github.com/github-dark.png#gh-light-mode-only)` |
```HTML
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/25423296/163456776-7f95b81a-f1ed-45f7-b7ab-8fa810d529fa.png">
<source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.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>
```
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.
{% endif %}
## Lists