Github Dark Mode Image Support

[mwarkentin]

I was directed here from pypi/warehouse#11251 and then theacodes/cmarkgfm#48.

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

I'm wondering if it would make sense to have an option that would let you specify light / dark mode when rendering and hide / show the images as they do on Github? Defaulting to rendering light mode only or ignoring the mode probably makes sense.

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.community/t/support-theme-context-for-images-in-light-vs-dark-mode/147981

[wooorm]

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

Perhaps y’all could do the same?

[mwarkentin]

Ah interesting, thanks! I'll pass that along (I don't actually work on pypi).

[phillmv]

Hey Mark,

As @wooorm noted, this is all CSS trickery and out of the markdown renderer's scope.

Cheers!,