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
 
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
 
openread profile image
OPEN READ

nice post

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

Thank you

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
 
best_codes profile image
Best Codes

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

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

You're welcome.