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](


<div align="center">

  ![Logo Light](

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)

kai_11 profile image
Kailash Choudhary • Edited

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

The AI Brief

AI generated git commit messages

Minimize the struggle of remembering what you just coded. AI-generated commits make it easier to manage projects and keep track of changes. The Nutlope/aicommits project demonstrates how AI can improve commit messages.

I open sourced an AI that creates any UI in seconds

Make AI-generated user interfaces a breeze. This open-source project harnesses the power of generative AI technologies like chatGPT to create versatile, quick, and intuitive UI components.

Use AI to commit like a PRO in 1 second

Upgrade your commit message game with AI. Boost your productivity by using ChatGPT to generate commit messages and avoid context switching. OpenCommit is an open-source library that helps you achieve this easily.

Build your own ChatGPT starter kit

Train AI models on custom data for improved domain-specific knowledge. Combine the power of WebView technologies and this starter kit to train your ChatGPT model on specific websites, allowing for better-optimized outcomes.