Theme-aware images

[mathieudutour]

Now that we can have a toggle to switch between themes, it'd be nice to a way to specify theme-aware images.

I tried using currentColor in an SVG but it doesn't work.

This makes pages like https://developers.raycast.com/api-reference/user-interface/icons-and-images impossible to toggle

[SamyPesse]

Hey @mathieudutour 👋 great to hear from you :) We just shipped a new release with this feature 🎉

From the app:

On an inline or block image, you can now click the button to replace it and choose the option to select a dark mode image:

With the GitHub/GitLab sync

You can also do it in Markdown using the HTML syntax (<picture> and <source>).

For block images, use the <figure> HTML element with a <picture> and <source> in it:

Text before:

<figure>
  <picture>
    <source srcset="https://user-images.githubusercontent.com/3369400/139447912-e0f43f33-6d9f-45f8-be46-2df5bbc91289.png" media="(prefers-color-scheme: dark)">
    <img src="https://user-images.githubusercontent.com/3369400/139448065-39a229ba-4b06-434b-bc67-616e2ed80c8f.png" alt="GitHub logo">
  </picture>
  <figcaption>Caption text</figcaption>
</figure>

Text after

For inline images (images with text around them), use the <picture> HTML element with a <source> in it:

Text before the image <picture><source srcset="https://user-images.githubusercontent.com/3369400/139447912-e0f43f33-6d9f-45f8-be46-2df5bbc91289.png" media="(prefers-color-scheme: dark)"><img src="https://user-images.githubusercontent.com/3369400/139448065-39a229ba-4b06-434b-bc67-616e2ed80c8f.png" alt="The GitHub Logo"></picture> and text after the image

Note that we are not yet supporting the GitHub-only syntax with #gh-dark-mode-only or #gh-light-mode-only (https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/). The main reason is that GitLab does not support this syntax and is harder to parse in some cases, like multiple images in a paragraph.

[mathieudutour]

awesome, thank you!