Skip to content

Instantly share code, notes, and snippets.

@pboling
Last active October 18, 2024 18:19
Show Gist options
  • 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
Loading
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
Loading
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
Loading
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
Loading
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@heaths
Copy link

heaths commented Oct 18, 2024

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

image

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

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