[CSS][JavaScript]DarkMode css Opcje

[TakiTaki]

Cześć,
Mam następujący problem próbuje dodać dark mode do strony i pojawia się błąd "toggleSwitch is null"

[PHP] pobierz, plaintext 
<div id="dark-switch" class="custom-control custom-switch tw mode-switch" style="padding-top: 27px; padding-left: 45px;">
       <input type="checkbox" class="custom-control-input"  id="darkSwitch">
       <label class="custom-control-label" for="darkSwitch" style="color: white;">Dark Mode</label>
</div>
[PHP] pobierz, plaintext 

[PHP] pobierz, plaintext 
 
const toggleSwitch = document.querySelector('.mode-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);
 
[PHP] pobierz, plaintext 

i css

[PHP] pobierz, plaintext 
:root {
      --background_color_body: #303030;
      --text_color_body: #000000;
      --background_nav_color: #353A40;
      --content-color: #F5F5F5;
      --right-form-color: #000000;
 
}
 
[data-theme="dark"] {
    --background_color_body: #000000;
    --text_color_body: #ffffff;
    --background_nav_color: #353A40;
    --content-color: #202020;
    --right-form-color: #FFFFFF;
 
}
 
.body{
  margin-bottom: 100px;
  background-color: var(--background_color_body);
  color: var(--text_color_body);
}
[PHP] pobierz, plaintext 

Ktoś może mi wyjaśnić dlaczego się pojawia ten błąd?