[Markdown] Specify theme context for images (Beta) #16910

dipree · 2022-05-19T11:19:12Z

dipree
May 19, 2022

You can now specify the theme an image is displaye 10000 d 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 · 2022-05-20T00:14:20Z

bric3
May 20, 2022

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>

12 replies

Gargron Jun 7, 2022

Works now!

bric3 Jun 7, 2022

10000

Confirmed, it works.

BOTCAHX Jun 10, 2022

Feedback

daikon100 Jun 11, 2022

its very awesome

flynn31 Jun 14, 2022

Thanks

vinkla · 2022-05-20T07:33:49Z

vinkla
May 20, 2022

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

5 replies

lumaxis May 20, 2022

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

vinkla May 20, 2022

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

lumaxis May 21, 2022

@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 May 30, 2022
Author

This was fixed.

daikon100 Jun 11, 2022

definately

kellertuer · 2022-05-23T14:48:11Z

kellertuer
May 23, 2022

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?

0 replies

bubba-123 · 2022-06-09T09:26:07Z

bubba-123
Jun 9, 2022

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/

0 replies

bric3 · 2022-06-09T15:43:22Z

bric3
Jun 9, 2022

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

7 replies

Counselor8 Jun 10, 2022

yes suitable @dipree

daikon100 Jun 11, 2022

its awesome

bric3 Aug 18, 2022

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

jhildenbiddle Oct 8, 2022

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 Dec 15, 2023

Any news on this ?

mahozad · 2022-06-10T08:15:33Z

mahozad
Jun 10, 2022

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)

1 reply

bric3 Jun 10, 2022

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

daikon100 · 2022-06-11T23:58:49Z

daikon100
Jun 11, 2022

sure,you can

0 replies

duongdam · 2022-06-13T10:58:58Z

duongdam
Jun 13, 2022

and what about svg render?

0 replies

daikon100 · 2022-06-13T19:16:22Z

daikon100
Jun 13, 2022

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>

0 replies

mahozad · 2022-06-14T13:16:17Z

mahozad
Jun 14, 2022

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.

0 replies

romilbhardwaj · 2022-08-14T16:31:40Z

romilbhardwaj
Aug 14, 2022

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:

System OS is in dark mode
In github settings -> appearance: Theme mode: Sync with system
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.

0 replies

bric3 · 2022-08-18T22:32:16Z

bric3
Aug 18, 2022

@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".

0 replies

This comment was marked as off-topic.

Sign in to view

This comment was marked as off-topic.

Sign in to view

This comment was marked as off-topic.

Sign in to view

[Markdown] Specify theme context for images (Beta) #16910

Uh oh!

Uh oh!

Replies: 13 comments · 27 replies

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dipree May 30, 2022 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as off-topic.

This comment was marked as off-topic.

Uh oh!

Replication

Uh oh!

Replies: 13 comments 27 replies

dipree May 30, 2022
Author