Light and dark mode SVGs for Github READMEs

Many years ago I read Simon’s blog post on automatically updating your Github profile with a README. You do this by creating a public repo with the exact same name as your user or organization name. So if you are https://github.com/bonobo/ you need to create https://github.com/bonobo/bonobo/ and whatever is in that repo’s README will show up as the main content in your Github profile.

Here is what you need to do:

# You have have whatever content you like here in Markdown format 

You then define a `<picture>` tag as you would in normal HTML 

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="./frankwiles-thin-dark.svg">
  <source media="(prefers-color-scheme: light)" srcset="./frankwiles-thin.svg">
  <img alt="Animated 'Frank Wiles' text" src="./frankwiles-thin.svg">
</picture> 

# More Markdown 

To be clear, you can then continue with other Markdown content  

# You have have whatever content you like here in Markdown format 

You then define a `<picture>` tag as you would in normal HTML 

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="./frankwiles-thin-dark.svg">
  <source media="(prefers-color-scheme: light)" srcset="./frankwiles-thin.svg">
  <img alt="Animated 'Frank Wiles' text" src="./frankwiles-thin.svg">
</picture> 

# More Markdown 

To be clear, you can then continue with other Markdown content  

What I was trying to achieve.

I was trying to use these animated SVGs in my personal Github profile.

The issue I was having was Github pages can also be viewed using a “Dark Mode”.

I use dark mode almost exclusively but for whatever reason I like Github using light mode so I didn’t notice this at first.

I tried adjusting the CSS inside the SVG itself but that didn’t work. What did work was having two sets of SVGs, one for light mode and one for dark. Hence, having to discover the ability to use a <picture> tag in a Github README.

Hope this helps someone!