Switch <Img> source based on data-theme

Issue

I have a dark-mode system built into my website but I can't figure out how to switch the image source. I'm using the Javascript below with no problems for a bunch of other variables (mostly color but also element positions, etc), I just need to add something for the img src but I'm not sure what to do next.

Code

const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');

function switchTheme(e) {
  if (e.target.checked) {
    document.documentElement.setAttribute('data-theme', 'dark');
  } else {
    document.documentElement.setAttribute('data-theme', 'light');
  }
}

toggleSwitch.addEventListener('change', switchTheme, false);

<picture class="swoop">
  <source srcset="assets/landingContentSwoopDark.png">
  <img src="assets/landingContentSwoopWhite.png ">
</picture>

EDIT:

I tried the answer below with some changes for my particular case and it still isn't working, but I'm guessing that's due to what I changed. Here is the updated code:

<div class="theme-switch-wrapper col-md-3">
    <label class="theme-switch switch pull-right" for="checkbox">
        <input type="checkbox" id="checkbox">
        <span class="slider round"></span>
    </label>

<script>
    const image = document.querySelector('.swoopImage');
    const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');

    function switchTheme(e) {
        if (e.target.checked) {
            document.documentElement.setAttribute('data-theme', 'dark');
            image.src = 'assets/landingContentSwoopDark.png';
        }
        else {
            document.documentElement.setAttribute('data-theme', 'light');
            image.src = 'assets/landingContentSwoopWhite.png';
        }
    }

    toggleSwitch.addEventListener('change', switchTheme, false);
    </script>
</div>

and

<div class="swoop">
    <img style="margin-top: -53%; position: relative; pointer-events: none;" class="swoopImage" src="assets/landingContentSwoopWhite.png" alt="image">
</div>

Solution

Problem

Given your code, I think it's because of the use of picture tag as it uses the first one if possible else it falls back to the next ones, and since your first image works it does not goes to next one. And then to switch the images you are changing the --bg-swoop variable through which you wanted to switch background image (I assume) but that's not how this works. To change the source of the image you need to use JS to change the value in src of the image.

Solution

There are some vague places. SO assuming you want to just swap the image based on Toggle dark mode, you can use the following:

if (toggle.checked) {
    image.src = 'path/to/image-on-check.png';
} else {
    image.src = 'path/to/image-on-un-check.png';
}

and as for HTML, you can only have a image tag:

<img id="image" src="path/to/image-on-un-check.png" alt="Image">

Demo

const toggle = document.getElementById('toggle');
const image = document.getElementById('image');

toggle.addEventListener('change', () => {
  if (toggle.checked) {
    image.src = 'https://repository-images.githubusercontent.com/692536747/5f5045c4-56a9-4dfc-ab63-6605677a0711';
  } else {
    image.src = 'https://repository-images.githubusercontent.com/711272363/eed53990-6c00-421c-98ae-daf8590d9481';
  }
});

<label for="toggle">Toggle Image:</label>
<input type="checkbox" id="toggle">

<img id="image" src="https://repository-images.githubusercontent.com/711272363/eed53990-6c00-421c-98ae-daf8590d9481" alt="Image">

For your case

For your particular case, the code would be:

const image = document.querySelector('.swoop');
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');

function switchTheme(e) {
  if (e.target.checked) {
    image.src = 'assets/landingContentSwoopDark.png';
  } else {
    image.src = 'assets/landingContentSwoopWhite.png';
  }
}


toggleSwitch.addEventListener('change', switchTheme, false);

<img class="swoop" src="assets/landingContentSwoopWhite.png" alt="Image">

Hope that works.

---

Edit

To make sure the code runs no matter where the script tag is, you can do:

window.addEventListener('load', () => {
    const image = document.querySelector('.swoop');
    const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
    
    function switchTheme(e) {
      if (e.target.checked) {
        image.src = 'assets/landingContentSwoopDark.png';
      } else {
        image.src = 'assets/landingContentSwoopWhite.png';
      }
    }
    
    toggleSwitch.addEventListener('change', switchTheme, false);
});

So the code will run after the window loads properly

Answered By - Hind Sagar Biswas