Github Markdown Light & Dark Themed Logo SVG

BrokenExample.md

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!

Broken

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

More Broken!

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 []

semver-base64-dark.svg

semver-base64-light.svg

semver-filter-green.svg

<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>SemVer</title>
<foreignObject width="100%" height="100%">
  <div xmlns="http://www.w3.org/1999/xhtml">
    <style>
      img { display: block; }
      @media (prefers-color-scheme: dark) {
        .filter-green {
          filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
        }
      }
    </style>

    <img class="filter-green" src="data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+U2VtVmVyPC90aXRsZT48cGF0aCBkPSJNLjM1NyA5LjAyNEExMi4wNyAxMi4wNyAwIDAwMi45NyAxOS44NjdhMTIuMDUxIDEyLjA1MSAwIDAwMTAuMzggNC4wNjNjNy43NjgtLjcwMyAxMy4wODYtOS43OTkgOS41MTctMTYuOC0uNDE2LTEuMTktMi4wNy0uMzY4LTEuOTAzLjU5Ni4yODcuNy41MjYgMS40MjEuNzEzIDIuMTU1YTkuOTgzIDkuOTgzIDAgMDEtMy45MjYgMTAuMjUgOS45NjUgOS45NjUgMCAwMS0xNC44MDctMy44MDlBOS45ODQgOS45ODQgMCAwMTQuNDQgNS40NDhhOS45NjggOS45NjggMCAwMTQuODUtMy4wNDQgOS44NjggOS44NjggMCAwMTcuMDIuNjMxLjMzMy4zMzMgMCAwMS4xNTUuNDI5bC0zLjk2MiAxMC42MmMtLjEwNy44MS0uNjkuNzg2LS43OTcgMGwtMi4zOC03LjM3YTEuNTcyIDEuNTcyIDAgMDAtLjc3My0uOTg4Yy0xLjE5LS41Ni0zLjA5My42NjctMi4zNzkgMi4xNTVsMy45MTQgMTAuNDQxYy41MjQgMS4zOTMgMS4wMjMgMS44MzQgMi4wNTggMS44MzRzMS41MzUtLjQ0IDIuMDU4LTEuODM0TDIwIDMuOTRhMS4wMzYgMS4wMzYgMCAwMC0uMzY5LTEuMTlDMTMuMS0yLjkwNyAyLjMyLjY0MS4zNTcgOS4wMjN6Ii8+PC9zdmc+" />
  </div>
</foreignObject>
</svg>

semver-logo-css-display-none.svg

semver-logo-css-filter-invert.svg

Crazy enough, these ALL work for me just fine.

The top section is working for me now in dark mode. Also the assets don't appear to be exactly correct. I wonder if I misnamed some...

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 style tags 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. 🤔

Confirmed that it's a Safari issue: not working in Safari 18.0.1 but it is on Edge 131.0.2889.0:

In Safari it's just black <text> and <polyline>s.