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:
Light Mode
Dark Mode
Centering the image
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
tag.
<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!
Top comments (1)
@scopsy How to convert those images to clickable links??