Adding dark/light mode specific images to your GitHub readme page

#opensource #tutorial #html #github

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!

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →