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.