Change Logo in Dark Mode

Hi guys!

I'm playing around a bit with creating a dark mode on a website.

Works fine so far.

What I did:

Created CSS variables:

/* Light Mode */

:root {
    --primary-color: #688e23;
    --secondary-color: #ff8c00;
    --font-color: #2b2b2b;
    --bg-color: #fff;
    --heading-color: #2b2b2b;
}

/* Dark Mode */

[data-theme="dark"] {
    --primary-color: #9acd32;
    --secondary-color: #ff8c00;
    --font-color: #ffffff;
    --bg-color: #000000;
    --heading-color: #ffffff;
}

Added the dark mode toogle-button as hook (generate_after_navigation):

<div class="theme-switch-wrapper">
    <label class="theme-switch" for="checkbox">
        <input type="checkbox" id="checkbox" />
        <div class="slider round"></div>
  </label>
  <em>Dark Mode</em>
</div>

Added some Js as Hook (wp_footer):

<script>

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

if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);
  
    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}

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

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

</script>

Now I want to change the logo as well when dark mode is toggled on. Do you have an idea how to realize this?

Homepage and the logo file I want to use in dark mode is in private info.

Thanks and greetings

Thomas