Change your Github Settings > Appearance > Theme (light to dark, or dark to light) and reload this page! You will note that none of these solutions work!
There are two broken ways I have tried this filter: invert(1) and display: none:
| Type | filter: invert(1) |
display: none |
|---|---|---|
| Markdown img tag [] |  |
 |
| HTML img tag w/o width | |
|
| HTML img tag w/ width | |
|
Next I use markdown to generate the <table> and HTML for the <image> tags, which allows use of the HTML width property on the image tag. More importantly it allows the addition of a special anchor on the src URL that Github's markdown parser interprets to support dark mode. Even more importantly, the #gh-dark-mode-only and #gh-light-mode-only do not appear to work (at least for Gists, maybe they would in a project readme for "real" Github).
| Type | Light | Dark |
|---|---|---|
| Markdown img tag [] |  |
 |
| Markdown img tag [] gh |  |
 |
| Markdown img tag () | |
|
| Markdown img tag () gh | |
|
| Filter Green [] |  |
|
None of it is working in Safari 18.0.1 for me as well: all appear as black graphics on white backgrounds. I'm trying to render a perf graph in markdown and just used raw
svg styletags that work when opening a local file in Safari. When it didn't render correctly in GitHub-rendered markdown, I came across this and https://gist.github.com/privatenumber/0b3db759ca8c90103360603ff3d49893 (which I only see yellow).I tried toggling my GitHub preferences from "system" to "single" - all dark theme - and it doesn't seem to matter. I'm wondering if there's some bug where - somehow - GitHub-rendered markdown is messing things up. Can't see how, though. The SVG in my case is imported and contains the stylesheet embedded, so only the browser downloads, parses, and renders it. 🤔