Recently we finished designing a new logo for our open-source project Novu and discovered in the GitHub docs that you can specify an image for light and dark modes separately using the:
#gh-dark-mode-only on the .md src source suffix.
Here is an example:
![Logo Dark](https://image-link.png#gh-dark-mode-only) ![Logo Light](https://image-link.png#gh-light-mode-only)
Only a single image will be shown depending on the user theme preference. Let's see it in action:
It's common that you want to center a smaller image to the center of the screen. Luckily we can use the
align="center" property on the supported
<div align="center"> ![Logo Dark](https://user-images.githubusercontent.com/8872447/165779319-34962ccc-3149-466c-b1da-97fd93254520.png#gh-dark-mode-only) </div> <div align="center"> ![Logo Light](https://user-images.githubusercontent.com/8872447/165779274-22a190da-3284-487e-bd1e-14983df12cbb.png#gh-light-mode-only) </div>
The new lines after the starting and before closing of the div are important, otherwise the image won't be rendered.
I think the new theme matched logo looks great and it's another touch of detail that makes your GitHub personal or open-source project readme standout.
Post your results in the comments!