Github Dark Mode Image Support
mwarkentin opened this issue · 3 comments
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
- getsentry/sentry-python#1342
- microsoft/vscode#139556
- https://github.community/t/support-theme-context-for-images-in-light-vs-dark-mode/147981
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?
Ah interesting, thanks! I'll pass that along (I don't actually work on pypi).