How to change or swap an image to a light-themed image when the user's system theme is changed to light mode using HTML?
Tags: html
Published: 2022-12-12 05:25:34

---
  title: How to change or swap an image to a light-themed image when the user's system theme is changed to light mode using HTML?
  published: true
  tags: HTML5
  date: Mon Dec 12 2022 10:55:34 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/change-or-swap-image-when-light-theme-mode-enabled-users-system
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_c1f1d15f6f.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/change-or-swap-image-when-light-theme-mode-enabled-users-system)
  To change or swap the image to a light-themed image when the user's system theme is changed to light mode, you can use the `picture` HTML element and then use the `source` HTML element to define the light-themed image's url using the `srcset` attribute and another `img` HTML element to define the default image url when the light mode is not enabled using the src attribute.

The `source` HTML element should also need one attribute called `media` having the value of `(prefers-color-scheme: light)` which instructs the browser to swap or change the default image with a light-themed image when the user's light mode is enabled.

**NOTE: To know more about using the `picture` HTML element tag, see the blog on [How to load different image formats according to browser support using HTML?](https://melvingeorge.me/blog/load-different-image-formats-according-to-browser-support-html)**

### TL;DR

```html
<html>
  <body>
    <!-- Wrapping the `img` HTML tag using the `picture` HTML tag -->
    <picture>
      <!-- Using the `source`  HTML tag to set the light theme image -->
      <source
        srcset="
          https://images.pexels.com/photos/1002722/pexels-photo-1002722.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=200&w=200
        "
        media="(prefers-color-scheme: light)"
      />
      <img
        src="https://images.pexels.com/photos/11253374/pexels-photo-11253374.jpeg?auto=compress&cs=tinysrgb&w=200&h=200&dpr=2"
        alt="mountains"
      />
    </picture>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
      perspiciatis obcaecati qui tenetur laborum iusto! Itaque, quis beatae rem
      aliquam iure velit temporibus animi modi nam assumenda perferendis,
      repudiandae commodi, praesentium ullam. Iste odit, deserunt quia accusamus
      id molestias, facere vitae aspernatur omnis ipsum nobis harum praesentium,
      dolorem quae deleniti nisi repellendus? Labore nostrum hic necessitatibus
      voluptatum explicabo vero, autem eius, eum harum, ipsa repudiandae?
    </p>
  </body>
</html>
```

For example, let's say we have a webpage with some text and an image.

The HTML would look something like this,

```html
<html>
  <body>
    <img
      src="https://images.pexels.com/photos/11253374/pexels-photo-11253374.jpeg?auto=compress&cs=tinysrgb&w=200&h=200&dpr=2"
      alt="mountains"
    />
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
      perspiciatis obcaecati qui tenetur laborum iusto! Itaque, quis beatae rem
      aliquam iure velit temporibus animi modi nam assumenda perferendis,
      repudiandae commodi, praesentium ullam. Iste odit, deserunt quia accusamus
      id molestias, facere vitae aspernatur omnis ipsum nobis harum praesentium,
      dolorem quae deleniti nisi repellendus? Labore nostrum hic necessitatibus
      voluptatum explicabo vero, autem eius, eum harum, ipsa repudiandae?
    </p>
  </body>
</html>
```

Now let's wrap the `img` HTML element tag with a `picture` HTML element tag like this,

```html
<html>
  <body>
    <!-- Wrapping the `img` HTML tag using the `picture` HTML tag -->
    <picture>
      <img
        src="https://images.pexels.com/photos/11253374/pexels-photo-11253374.jpeg?auto=compress&cs=tinysrgb&w=200&h=200&dpr=2"
        alt="mountains"
      />
    </picture>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
      perspiciatis obcaecati qui tenetur laborum iusto! Itaque, quis beatae rem
      aliquam iure velit temporibus animi modi nam assumenda perferendis,
      repudiandae commodi, praesentium ullam. Iste odit, deserunt quia accusamus
      id molestias, facere vitae aspernatur omnis ipsum nobis harum praesentium,
      dolorem quae deleniti nisi repellendus? Labore nostrum hic necessitatibus
      voluptatum explicabo vero, autem eius, eum harum, ipsa repudiandae?
    </p>
  </body>
</html>
```

Now we need to add the `source` HTML tag to define the image to swap the default image when the light theme mode is toggled on the user's system.

To do that, we can use the `srcset` attribute with the value of the light theme image url then the `media` attribute having the value of `(prefers-color-scheme: light)` like this,

```html
<html>
  <body>
    <!-- Wrapping the `img` HTML tag using the `picture` HTML tag -->
    <picture>
      <!-- Using the `source`  HTML tag to set the light theme image -->
      <source
        srcset="
          https://images.pexels.com/photos/1002722/pexels-photo-1002722.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=200&w=200
        "
        media="(prefers-color-scheme: light)"
      />
      <img
        src="https://images.pexels.com/photos/11253374/pexels-photo-11253374.jpeg?auto=compress&cs=tinysrgb&w=200&h=200&dpr=2"
        alt="mountains"
      />
    </picture>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
      perspiciatis obcaecati qui tenetur laborum iusto! Itaque, quis beatae rem
      aliquam iure velit temporibus animi modi nam assumenda perferendis,
      repudiandae commodi, praesentium ullam. Iste odit, deserunt quia accusamus
      id molestias, facere vitae aspernatur omnis ipsum nobis harum praesentium,
      dolorem quae deleniti nisi repellendus? Labore nostrum hic necessitatibus
      voluptatum explicabo vero, autem eius, eum harum, ipsa repudiandae?
    </p>
  </body>
</html>
```

A visual representation of the image getting changed or swapped when light mode is toggled on the user's system is shown below,

![image changing when light mode theme is toggled](/uploads/dark_theme_1d1bb6206e.gif)

See the above code live in [codesandbox](https://codesandbox.io/s/change-or-swap-image-when-light-theme-mode-enabled-users-system-n8fh0o?file=/index.html)

That's all 😃.