# How to change an HTML image URL in dark mode

> Learn how to swap an HTML image in dark mode without CSS or JavaScript, using the picture tag with a source and the prefers-color-scheme dark media feature.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2020-04-29 | Topics: [HTML](https://flaviocopes.com/tags/html/) | Canonical: https://flaviocopes.com/dark-mode-change-img-source/

Using CSS it's pretty easy to apply changes if the system is in dark mode, using the `prefers-color-scheme` media feature.

Check my blog post on [dark mode](https://flaviocopes.com/dark-mode/) if you want to learn more about it.

Today I run into a problem - how to change an image defined in the HTML, rather than a CSS rule?

Turns out there's a plain HTML way to do that, without any CSS or [JavaScript](https://flaviocopes.com/javascript/) involved.

We can use the `picture` tag to wrap the `img` tag:

```html
<picture>
  <source 
    srcset="dark.png" 
    media="(prefers-color-scheme: dark)">
  <img src="light.png">
</picture>
```

If dark mode is supported and enabled, the `dark.png` image will be used as the source for the `img` tag.

The tag is very well supported, and old browsers that do not implement it, or do not implement dark mode, will fall back to displaying the `light.png` image.

It's important to note that the browser does not download 2 images, in any case: if it's dark mode, in this example it will just download the `dark.png` image, and if it's light mode, it will download only `light.png`, so there's no waste of bandwidth.