{"id":86598,"date":"2025-04-18T12:30:46","date_gmt":"2025-04-18T19:30:46","guid":{"rendered":"https:\/\/github.blog\/?p=86598"},"modified":"2025-04-18T12:30:46","modified_gmt":"2025-04-18T19:30:46","slug":"how-to-make-your-images-in-markdown-on-github-adjust-for-dark-mode-and-light-mode","status":"publish","type":"post","link":"https:\/\/github.blog\/developer-skills\/github\/how-to-make-your-images-in-markdown-on-github-adjust-for-dark-mode-and-light-mode\/","title":{"rendered":"How to make your images in Markdown on GitHub adjust for dark mode and light mode"},"content":{"rendered":"\n

GitHub supports dark mode and light mode, and as developers, we can make our README images look great in both themes. Here’s a quick guide to using the <picture><\/code> element in your GitHub Markdown files to dynamically switch images based on the user’s color scheme.<\/p>\n

When developers switch to GitHub’s dark mode (or vice versa)<\/a>, standard images can look out of place, with bright backgrounds or clashing colors.<\/p>\n

Instead of forcing a one-size-fits-all image, you can tailor your visuals to blend seamlessly with the theme. It’s a small change, but it can make your project look much more polished.<\/p>\n

One snippet, two themes!<\/strong><\/span><\/a><\/h2>\n

Here’s the magic snippet you can copy into your README (or any Markdown file):<\/p>\n

<picture>\n  <source media=\"(prefers-color-scheme: dark)\" srcset=\"dark-mode-image.png\">\n  <source media=\"(prefers-color-scheme: light)\" srcset=\"light-mode-image.png\">\n  <img alt=\"Fallback image description\" src=\"default-image.png\">\n<\/picture>\n<\/code><\/pre>\n
Now, we say it’s magic, but let’s take a peek behind the curtain to show how it works:<\/p>\n