Let's say you want to beautify a GitHub repo README file—for example, the ✨ Special Repository ✨ that serves as the front page of your profile:
In my case, I want to add the logos of my current and previous employers, but I need to ensure that they look good in both light and dark mode.
For MUI, that's simple enough—the logo uses a cool blue color that looks great on light and dark backgrounds:
<img alt="MUI logo" src="https://user-images.githubusercontent.com/71297412/178181182-d024cbef-b80c-4790-a225-5bdb5aae2645.svg" height="125" />
But if I take the same approach with the Hashnode logo, it doesn't work in dark mode:
<img alt="Hashnode logo" src="https://user-images.githubusercontent.com/71297412/178180441-59f1644e-2ab6-4bf0-866f-2c77b2a63433.png" height="25">
Not great! 😵
Light and dark mode images
To solve this issue, GitHub introduced a way to specify the theme an image is shown to.
This solution uses the HTML
<picture> tag in conjunction with the
prefers-color-scheme media feature.
So for my Hashnode logo, I can give it one image with light text, and another with dark text, and then let the code sort it out based on the user's preference:
<picture> <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/71297412/178180562-38f53e67-a31f-4c9f-b1a1-c9221703df4b.png"> <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/71297412/178180441-59f1644e-2ab6-4bf0-866f-2c77b2a63433.png"> <img alt="Hashnode logo" src="https://user-images.githubusercontent.com/71297412/178180441-59f1644e-2ab6-4bf0-866f-2c77b2a63433.png" height="25"> </picture>
Now, when I switch from light to dark mode on GitHub, the logo changes accordingly:
Pretty neat, right?
You can see it in action in my GitHub profile—feel free to give me a follow! 😇
💡 Before the introduction of the
<picture> tag, GitHub used to let you specify themes for images using the fragments
These have since been deprecated and should no longer be used.
If you enjoyed this piece and you want to receive exclusive articles I don't publish anywhere else, you can sign up for my email newsletter through this link. I promise to make every email something you will be excited to read!