austausch von Images funktioniert nicht

[SaarlandToday]

moin moin Mädels

Ich versuche mit dem folgenden Script wenn der darkMode aktiviert wird im Headerbereich das Logo auszutauschen.

Irgendwie funktioniert es allerdings nicht

das ist der HTML Code:

        <div id="logo-container" class="logo-container">
          <a href="/">
            <img id="logo" src="/sites/default/files/st-logo-dark.png" alt="Mode Image" class="logo">
          </a>
        </div>

und das der JS Code.
fHTML
function updateLogo() {
    const logo = document.getElementById('logo');
    const darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

    if (darkMode) {
        alert('is darkMode')
        document.getElementById('logo').src = '/sites/default/files/st-logo-light.png';
    } else {
        alert('is not darkMode')
        document.getElementById('logo').src = '/sites/default/files/st-logo-dark.png';
}

updateLogo();
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateLogo);

ich habe die alert#s hinzugefügt um zu testen, ob das Script überhaupt etwas macht , und siehe da es geht jeweils in den korrekten Bereich, tauscht allerdings das Logo nicht aus.

In der Konsole sehe ich den folgenden Fehler

Uncaught TypeError: document.getElementById(...) is null

p.S. Die Grafiken sind vorhanden.