DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Switch to a darker image when on dark mode!
Ustariz Enzo
Ustariz Enzo

Posted on • Updated on

Switch to a darker image when on dark mode!

Hey fellow creators,

Let's learn how to switch images when using a dark/light mode.

If you prefer to watch the video version, it's right here :

1. How to handle the dark mode.

You only need to add a media query so that, when you change the mode from light to dark in your computer settings, the theme of your app changes from light to dark. Here's how to do it:

@media (prefers-color-scheme: dark){
   body {
      background: #000;
   }
}
Enter fullscreen mode Exit fullscreen mode

Now, there are two ways to change images when you switch from dark to light mode (or the other way around). Let's take a look at the first one!

2. The first way to switch images.

You can wrap the images inside a picture element.


<picture>
  <source srcset="ressources/dark-empire.jpg" media="(prefers-color-scheme:dark)">
  <img src="ressources/light-empire.jpg">
</picture>

Enter fullscreen mode Exit fullscreen mode

That way, if you've selected dark theme in your settings, then it will choose the first image, if not it will choose the second one.

Then, you can style the images however you want! Here's how I did it:

img {
    width: 500px;
    height: 600px;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0 auto;
    position: relative;
    top: 70px;
}
Enter fullscreen mode Exit fullscreen mode

3. The second way to switch images.

But there's another way to do this! You can create an empty div in HTML and then add the image as a background of this div.

<div class="img-toggle">

</div>
Enter fullscreen mode Exit fullscreen mode
.img-toggle {
    width: 500px;
    height: 600px;
    display: block;
    margin: 0 auto;
    position: relative;
    top: 70px;
    background: url(ressources/light-empire.jgp) center / cover;
}
Enter fullscreen mode Exit fullscreen mode

However, you then need to update your media query so that you have the darker image for the dark mode and not the lighter image.

@media (prefers-color-scheme: dark){
     body {
    background: #000;
     }
     .img-toggle {
        background: url:url(ressources/dark-empire.jgp) center / cover;
    }
}
Enter fullscreen mode Exit fullscreen mode

You've done it! Now your dark theme can be even darker than before ;)

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

Enzo.

Top comments (1)

Collapse
 
toheeb profile image
Toheeb Ogunbiyi

One other option is to use prefers-color-scheme within an inline SVG. Good for icons.

You could also use inline SVG to wrap images and add theme effects on the SVG.

  • No need for the browser to load another image. One image that responds to the page's theme through its SVG wrapper.
  • SEO still intact,

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠