How to make your images in Markdown on GitHub adjust for dark mode and light mode
Blog post from GitHub
GitHub Markdown supports dynamic image switching for dark and light mode using the <picture> element, enhancing the visual appeal of README files across different user color schemes. By defining multiple image sources with the <source> media attribute, developers can ensure that images blend seamlessly with either theme, improving project presentation. The <picture> tag allows browsers to load specific images based on the user's color scheme preference: dark mode images for dark themes and light mode images for light themes, with a fallback <img> tag for unsupported scenarios. This approach can be used in any Markdown files rendered on GitHub, contributing to a more polished and adaptable appearance. Cassidy Williams, GitHub's senior director for developer advocacy, shares this technique, along with a demo link, to help developers implement it effectively.
No tracked trend matches for this post yet.
Use this post, company, and trend context to find content marketing opportunities, perform competitive analysis, or address product feature gaps via the Plushcap MCP server or the Plushcap API.