Example code for github light/dark

[nwhitehead]

Love the project and the idea!

I think a common case for using the logo could be in README.md files on github. In this case the ideal thing to do is to have a light mode and dark mode variant that is chosen by the theme. This can be done with github-specific anchor tagging. It might be good to include this markup in the description of the different banners.

It's something like this in the README.md:

<a href="https://brainmade.org#gh-dark-mode-only">
 <img src="https://github.com/user-attachments/assets/4aa8232a-5669-47c9-85a5-085060d09ab3"></img>
</a>

<a href="https://brainmade.org#gh-light-mode-only">
  <img src="https://github.com/user-attachments/assets/b1ed74f3-0844-409c-a183-36be32d774fb"></img>
</a>

I uploaded the image files using github editor (pasting in the images) to get the user-attachment URLs.

[0atman]

Thank you! I don't quite understand what you're suggesting, isn't this already captured in the readme? Here's the relevant part:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="/docs/white-logo.svg">
  <source media="(prefers-color-scheme: light)" srcset="/docs/black-logo.svg">
  <img alt="Humanmade mark." src="/docs/black-logo.svg">
</picture>

[nwhitehead]

Cool! I didn't notice that. That way seems better than the way I suggested.

I guess the idea for this issue is to explain in the readme or brainmade.org website how to do this, showing that example code. I saw a random repo with the dark logo on my dark theme and tried to help the author fix it. Thought it would be good to create an issue here about documenting how to do it.