Using Dark/Light Mode Specific Images in GitHub Markdown
Tags: github, darkmode, theme, markdown
Published: 2022-02-14 16:56:44

## Hey There Devs! 👋
Hope you are doing great with your projects.

### TOC
* [Why this post? 🤔](#why-this-post)
* [Procedure 🧪](#procedure)
  * [Example](#example)
  * [Live Example](#live-example-)
* [Disclaimers ⚠️](#disclaimers)

### Why this post? 🤔

As a developer we develop projects, write code all day around and we might also publish it on [GitHub](https://github.com) to let others understand and use our project.

And Markdowns play a vital role in explaining the code, branding your projects, showcasing your stats and so on.

And you all know how much is the craze of the **Dark Mode** nowadays especially between the Devs. But most browsers have light mode as their default.

So, here comes the actual point of this post. By default GitHub adapts most of the parts of the Markdown according to the theme. But it doesn't do anything with your images by default.

Imagine an image that was made to look good on white background with black as its foreground color. it will not even be notable in the dark mode.

So, you may want to optimize your Images according to the current theme of the viewer's browser. And also maybe to look a bit cool and professional 😅.

### Procedure 🧪

The procedure is very simple. No I am not joking its actually very simple.

1. Do Create 2 separate versions of your images one optimized for light mode and one for dark mode.
For example take this image of Termux. I have created two variants of the same image, one for light and one for dark:
<figure><img alt="Light Mode Variant" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3w3ulf5wku7rpl25kjw2.png" style:"width:100px;height:100px;" />
<figcaption>Light Mode Variant</figcaption>
</figure>
<figure>
<img alt="Dark Mode variant" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38ubynrshj4jerwmjky9.png" style:"width:100px;height:100px;" />
<figcaption>Dark Mode Variant</figcaption>
</figure>
2. Now, here comes the magical thing 🪄. To make an Image only visible in **Dark Mode**, add `#gh-dark-mode-only` at the end of the image url. And to make an Image Only Visible in **Light Mode**, add `#gh-light-mode-only`.

#### Example:

```md
![Termux Logo](https://user-images.githubusercontent.com/72879799/153904003-d7dee710-6552-4d23-a803-7a9a0ba67d92.png#gh-dark-mode-only)
![Termux Logo](https://user-images.githubusercontent.com/72879799/153904095-9d78a019-8495-4035-8174-e3da8e4dd66b.png#gh-light-mode-only)
```
Now the **Dark Mode** variant of the Image will only be visible in the **Dark mode** and the **Light Mode** variant will only be visible in the **Light Mode**.

The Image URLs above are just for demonstration. Replace them with your own image URLs and you are Ready to Go!

And it works 🥳🎉!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upgf5j5oml0hn0pb6v0u.png)
 

#### Live Example ⚡:
You can see the working example at my [GitHub](https://github.com/arnav-kr/file-host/blob/b3346b4e73fcceb129ad0da394996578056cf13b/dev.to/examples/light-and-dark.md).

### Disclaimers ⚠️
> **Note that it will not adapt according to the Theme if the image is not hosted on the GitHub**