Github Dark Mode Image Support

[mwarkentin]

What's the problem this feature will solve?
Github supports rendering a specific image for light vs. dark mode by actually specifying two images. Here's an example PR: getsentry/sentry#33799

However when the .md file is rendered elsewhere (like pypi) it would show up as 2 images.

Describe the solution you'd like
It would be great if pypi could show light mode images only, and hide dark mode images (since pypi doesn't have a dark mode). If pypi ever adds a dark mode feature, it could use the correct image at that time.

Additional context

• https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to
• chore: Fix dark mode logo in readme getsentry/sentry-python#1342
• Support GitHub theme-conditional images in README / Marketplace page microsoft/vscode#139556
• https://github.saobby.my.eu.orgmunity/t/support-theme-context-for-images-in-light-vs-dark-mode/147981

[di]

I've transferred this issue to https://github.com/pypa/readme_renderer/, but this is likely blocked on a change to our underlying GitHub-flavored Markdown formatter, https://github.com/theacodes/cmarkgfm

[mwarkentin]

@di thanks - should I open an issue over there?

[di]

Yep

[mwarkentin]

@di looks like this is just done in CSS on Github:

GH implements this very naïvely/smartly with CSS. Basically:

@media (prefers-color-scheme: light) {
  /* ^-- browser/os setting */
  :root[data-color-mode=auto] .markdown [href$="#\gh-dark-mode-only"] {
    /* ^-- gh theme */
    display: none
  }
}

[di]

Sorry, I should have looked at the PR you linked. Is the user required to write HTML to do this? Is there not a way to add dark mode images in markdown?

If it's just HTML, I think we can just add that snippet to PyPI's CSS styles.

[mwarkentin]

@di it can be done in markdown as well (but I think this just renders out to the same HTML as we wrote?):

![GitHub Dark](https://github.com/github-dark.png#gh-light-mode-only)
![GitHub Light](https://github.com/github-light.png#gh-dark-mode-only)

[di]

Ah, I see, thanks! Transferring this back to https://github.com/pypa/warehouse. Please feel free to create a PR if you'd like.

[mwarkentin]

Just leaving myself a few notes here in case I have a bit of time to try to figure this out:

• https://warehouse.pypa.io/development/getting-started.html
• https://github.com/pypa/warehouse/blob/main/warehouse/static/sass/blocks/_project-description.scss

[mrgrain]

GitHub now also supports the <picture>.
https://github.blog/changelog/2022-08-15-specify-theme-context-for-images-in-markdown-ga/

Ideally <picture> would be supported, but a simple implementation could remove everything bar the <img> tag.