Darkmode + Смена источника изображений

Question

Итак, я реализовал темный режим на своем веб-сайте, но есть изображения, которые мне нужно изменить, чтобы он работал правильно. У меня есть светлая и темная версии изображений, которые мне нужны, но я хотел бы знать, есть ли способ изменить источник изображения при включении темного режима.

Я получил свой код из этого видео: https://www.youtube.com/watch?v=wodWDIdV9BY

Это моя кнопка для темного режима и изображения в HTML:

<button onclick="changeImage();" id="dark-mode-toggle" class="dark-mode-toggle">Darkmode On/Off</button>

Javascript для включения темного режима (см. Ссылку на YouTube выше):

let darkMode = localStorage.getItem('darkMode'); 
const darkModeToggle = document.querySelector('#dark-mode-toggle');
const enableDarkMode = () => {
  document.body.classList.add('darkmode');
  localStorage.setItem('darkMode', 'enabled');
}

const disableDarkMode = () => {
  document.body.classList.remove('darkmode');
  localStorage.setItem('darkMode', null);
}
if (darkMode === 'enabled') {
  enableDarkMode();
}

darkModeToggle.addEventListener('click', () => {
  darkMode = localStorage.getItem('darkMode'); 
  if (darkMode !== 'enabled') {
    enableDarkMode();
  } else {  
    disableDarkMode(); 
  }
});

Это то, что я пробовал

let darkMode = localStorage.getItem('darkMode'); 

const darkModeToggle = document.querySelector('#dark-mode-toggle');

const enableDarkMode = () => {

    document.getElementById('icon').src="images/twar-white-icon.png"

  document.body.classList.add('darkmode');
  localStorage.setItem('darkMode', 'enabled');
}

const disableDarkMode = () => {

    document.getElementById('icon').src="images/twar-black-icon.png"

  document.body.classList.remove('darkmode');
  localStorage.setItem('darkMode', null);
}
if (darkMode === 'enabled') {
  enableDarkMode();
}

darkModeToggle.addEventListener('click', () => {
  darkMode = localStorage.getItem('darkMode'); 
  if (darkMode !== 'enabled') {
    enableDarkMode();
  } else {  
    disableDarkMode(); 
  }
});

В основном я добавил document.getElementById('icon').src="images/twar-white-icon.png" и document.getElementById('icon').src="images/twar-black-icon.png"

Но я продолжал получать сообщение об ошибке «Uncaught TypeError: Cannot set property 'sr c' of null» в моем журнале консоли. Мне нужно, чтобы источник изображения изменился как темный режим во включенном и отключенном, потому что функция была сохранена в localStorage, которая запоминает настройки, сделанные во время предыдущего посещения. Источник изображения должен зависеть от того, включен темный режим или нет.

Answer 1

Javascript записано правильно, но я получал сообщения об ошибках, что идентификатор был нулевым. Это произошло потому, что я поместил тег скрипта над тегом изображения, и как только я сдвинул его вниз по тегу body, он прочитал идентификатор и выполнил функцию.