Support GitHub Light/Dark Image Switcher

[Sherlouk]

GitHub have recently announced a new feature which allows for markdown documents (such as the READMEs we render) to support images which change based on light/dark mode.

https://twitter.com/ashtom/status/1463554157932023808

![GitHub-Mark-Light](https://user-images.githubusercontent.com/3369400/139447912-e0f43f33-6d9f-45f8-be46-2df5bbc91289.png#gh-dark-mode-only)![GitHub-Mark-Dark](https://user-images.githubusercontent.com/3369400/139448065-39a229ba-4b06-434b-bc67-616e2ed80c8f.png#gh-light-mode-only)

https://docs.github.com/en/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to

I don't know how much work it will be to handle this, or indeed what format we get it back in the HTML from GitHub (it might even support it for free!) but would be good to look into this.

[daveverwer]

Yep. I'd be very much in favour of supporting this if we can make it work without too much trouble.

Based on doing no research at all, 😱 my gut feeling, given the way that we grab rendered README files from GitHub that all of the requisite parts of this might already be coming in and we might just need a CSS tweak to support this. However, It'd be great to see an example of a repository that's using it to know. Do we have any examples of README files in the index that use this? If not, can we create one using one of our packages? LeftPad is available for testing at a push.

[MortenGregersen]

Maybe it's not an issue if you add the image via markdown. This logo is added with HTML in the markdown so it can be centered. Maybe that could play a part in how Github serves the HTML.

[daveverwer]

I wish they had done it by using a picture element, like this:

https://github.com/SwiftPackageIndex/SwiftPackageIndex-Blog/blob/master/Content/posts/launching-the-swift-package-index-playgrounds-app-for-macos.md?plain=1#L17

I think it's going to need JavaScript on the SPI site the way they've done it.

[daveverwer]

It's possible CSS can target the anchor at the end of a URL, but I'm not sure.

[Sherlouk]

Can we inspect element in GitHub.com to see how they're doing it?

Is their DOM different to what we get? What CSS do they have?

[daveverwer]

Yep, of course. I haven't started looking at a solution yet.

[daveverwer]

Filed as #1398