DEV Community

Cover image for How to display different images for GitHub light mode and dark mode

How to display different images for GitHub light mode and dark mode

𝚂𝚊𝚞𝚛𝚊𝚋𝚑 𝚁𝚊𝚒 on August 22, 2025

Learn how to make your images automatically adapt to light and dark themes on GitHub README using Markdown and HTML, especially for company/project...
Collapse
 
suvrajeet profile image
Suvrajeet Banerjee •

Theme aware! 🎨

Collapse
 
srbhr profile image
𝚂𝚊𝚞𝚛𝚊𝚋𝚑 𝚁𝚊𝚒 •

Yes 🙌

Collapse
 
yafuso_dev profile image
Yafuso Bera •
<source media="(prefers-color-scheme: dark)" srcset="https://path/to/your/image-dark.png">
Enter fullscreen mode Exit fullscreen mode

Do you need to add a :light in here as well? To specify the image for the light theme?

Collapse
 
srbhr profile image
𝚂𝚊𝚞𝚛𝚊𝚋𝚑 𝚁𝚊𝚒 •

So, one will be chosen as the default, and the other will be activated when on a dark theme. But yes, you can manually specify dark and light by having two source tags.

Collapse
 
fast profile image
fast-d3v •

Hah, this was simpler. I use neutral colors like gray-500 with a transparent png to match things.

Collapse
 
srbhr profile image
𝚂𝚊𝚞𝚛𝚊𝚋𝚑 𝚁𝚊𝚒 •

Well you could have vibecoded a react framework instead.

Collapse
 
openread profile image
OPEN READ •

nice post

Collapse
 
srbhr profile image
𝚂𝚊𝚞𝚛𝚊𝚋𝚑 𝚁𝚊𝚒 •

Thank you

Collapse
 
data_with_drake profile image
Data with Johnson •

Really useful

Collapse
 
srbhr profile image
𝚂𝚊𝚞𝚛𝚊𝚋𝚑 𝚁𝚊𝚒 •

Thank you

Collapse
 
louis7 profile image
Louis Liu •

I love this post, it's concise and useful!

Collapse
 
srbhr profile image
𝚂𝚊𝚞𝚛𝚊𝚋𝚑 𝚁𝚊𝚒 •

Thank you. Usefulness was the goal here.

Collapse
 
best_codes profile image
BestCodes •

Thanks for this super useful short little post! I've often wondered how to do this.

Collapse
 
srbhr profile image
𝚂𝚊𝚞𝚛𝚊𝚋𝚑 𝚁𝚊𝚒 •

You're welcome.