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.