DEV Community

Cover image for 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?
MELVIN GEORGE
MELVIN GEORGE

Posted on • Originally published at melvingeorge.me

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?

Originally posted here!
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?

TL;DR

<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>
Enter fullscreen mode Exit fullscreen mode

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

The HTML would look something like this,

<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>
Enter fullscreen mode Exit fullscreen mode

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

<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>
Enter fullscreen mode Exit fullscreen mode

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>
  <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>
Enter fullscreen mode Exit fullscreen mode

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

See the above code live in codesandbox

That's all πŸ˜ƒ.

Top comments (0)