Skip to content

Instantly share code, notes, and snippets.

@pboling
Last active May 14, 2023 07:10
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pboling/3bd9a0004b8fc010c0d7c523fecee832 to your computer and use it in GitHub Desktop.
Save pboling/3bd9a0004b8fc010c0d7c523fecee832 to your computer and use it in GitHub Desktop.
Github Markdown Light & Dark Themed Logo SVG

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 [] SemVer SemVer
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 [] SemVer SemVer
Markdown img tag [] gh SemVer SemVer
Markdown img tag () SemVer SemVer
Markdown img tag () gh SemVer SemVer
Filter Green [] SemVer SemVer
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@Xevion
Copy link

Xevion commented May 13, 2023

Crazy enough, these ALL work for me just fine.

@pboling
Copy link
Author

pboling commented May 14, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment