DEV Community

Cover image for Adding dark/light mode specific images to your GitHub readme page
Dima Grossman
Dima Grossman

Posted on

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

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)
Enter fullscreen mode Exit fullscreen mode

Only a single image will be shown depending on the user theme preference. Let's see it in action:

Light Mode

Light Mode Image

Dark Mode

Dark Mode Image

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>
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
kai_11 profile image
Kailash Choudhary • Edited

@scopsy How to convert those images to clickable links??