[Markdown] Specify theme context for images (Beta)

[dipree]

You can now specify the theme an image is displayed for in Markdown using the HTML <picture> element in combination with the prefers-color-scheme media feature.

For example:

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

Renders as:

We released a first iteration of this functionality last year and received a lot of great feedback from you. We reviewed again the possibilities and concluded that using the HTML <picture> construct is the best option from multiple points of view. We came up with a solution that makes it work with the GitHub theming system which was the initial concern.

Thank you for all the great feedback so far and let us know if there's anything that isn't quite working as expected.

🐳

[bric3]

Hello I noticed that contextual paths are not rewritten with the new picture element

Before one could write this

<img src=".github/images/colorful.svg?raw=true#gh-light-mode-only" width="100%" height="100">
<img src=".github/images/gray.svg?raw=true#gh-dark-mode-only" width="100%" height="100">

and paths would be prepended with the current branch context, eg:

<img src="/owner/repo/raw/current-branch/.github/images/gray.svg?raw=true#gh-dark-mode-only" width="100%" height="100" style="max-width: 100%;">

However, the image paths are not prepended with picture. It is necessary to prepend manually for now.

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="/owner/repo/raw/current-branch/.github/images/gray.svg?raw=true" width="100%" height="100">
  <img src="/owner/repo/raw/current-branch/.github/images/colorful.svg?raw=true" width="100%" height="100">
</picture>

[Gargron]

Works now!

[bric3]

Confirmed, it works.

[BOTCAHX]

Feedback

[daikon100]

its very awesome

[flynn31]

Thanks

[vinkla]

It seems <img src="..." width="100%" /> has stopped working since this update. The width is now ignored, is this the expected behaviour?

[lumaxis]

Hm, I cannot reproduce this. Using width="100%" still seems to work as expected:

<img alt=“Cartoon drawing of a sun” src="https://github.blog/wp-content/uploads/2022/04/Security-Product@2x.png" width="100%">

[vinkla]

You're right. It seems it only affects GIFs. For example:

[lumaxis]

@vinkla Ah! That could be related to a different feature that recently shipped: https://github.blog/changelog/2022-05-19-option-to-prevent-animated-images-from-playing-automatically/

If you could open a new discussion with this feedback, that would be super helpful 🙏🏼

[dipree]

This was fixed.

[daikon100]

definately

[kellertuer]

This is a really nice feature, but it seems the loading does not always work? I added it to our Readme here

https://github.com/JuliaManifolds/Manifolds.jl/blob/kellertuer/dark-logo-readme/README.md

But I had to switch from blob/ which worked in the previous version to raw such that the loading worked correctly; it seems the old readme (without the dark mode modifier) was able to rewrite that url?

[bubba-123]

You can now specify the theme an image is displayed for in Markdown using the HTML <picture> element in combination with the prefers-color-scheme media feature.

For example:

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

Renders as:

We released a first iteration of this functionality last year and received a lot of great feedback from you. We reviewed again the possibilities and concluded that using the HTML <picture> construct is the best option from multiple points of view. We came up with a solution that makes it work with the GitHub theming system which was the initial concern.

Thank you for all the great feedback so far and let us know if there's anything that isn't quite working as expected.

🐳

I Rather teach one pray then men to teach &@bubba-123/

[bric3]

It seems the iOS app does not yet support this feature.

[Counselor8]

yes suitable @dipree

[daikon100]

its awesome

[bric3]

Still not fixed in github mobile app, while the feature is GA

[jhildenbiddle]

I can confirm that relative links used within a <picture> element do not work property in the iOS app. I've created a support ticket and hope to see the issue addressed.

[bric3]

Any news on this ?

[mahozad]

Is it possible to add ability to use relative image links?

This is possible for "regular" markdown image syntax but doesn't seem to work for this new approach.

For example, if we are referencing an image in assets subdirectory of where the markdown file is located,
we can do this with regular markdown image syntax like this:

![My image description](assets/logo.svg)

[bric3]

As far as I know this now works, see this thread.

[daikon100]

sure,you can

[duongdam]

and what about svg render?

[daikon100]

i would also love to have that also bad

…

On Mon, Jun 13, 2022, 11:59 duongdam ***@***.***> wrote: and what about svg render? — Reply to this email directly, view it on GitHub <https://github.com/orgs/github-community/discussions/16910#discussioncomment-2937462>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AZPEV4HRXCSFE3X7LLMFMX3VO4H75ANCNFSM5WL3WSKQ> . You are receiving this because you commented.Message ID: ***@***.*** .com>

[mahozad]

For example:

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

@dipree
The example uses illegal curly quotation marks “...” instead of straight quotation marks "..." for alt attribute of the img element.

[romilbhardwaj]

Sorry if this is a duplicate of #1583.

GitHub seems to set the prefers-color-scheme CSS property to dark when using the light default in Night theme. Using the example from github docs:

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

This renders as:

The expected output should have been:

Replication

This happens only when you use the following settings:

1. System OS is in dark mode
2. In github settings -> appearance: Theme mode: Sync with system
3. Light default is selected for the Night theme

Here is the configuration:

When this configuration is used, the github page sets prefers-color-scheme: dark even though the page is rendered in light mode.

[simonprovost]

+1! So greatly explained and no answer yet? UP, please 🙏 3-ish years since this message, any workaround?

This is very frustrating! Happened in one of our PR and thought it was our fault, appears not to be actually!

@dipree

[bric3]

@dipree Good news it also works for Asciidoc documents if using the HTML passthrough

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

This should also work with images contextual to a repository, say src=".github/images/dark.png".