[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?

[LowiczakPL]

[HTML] pobierz, plaintext 
<input type="checkbox" class="custom-control-input mode-switch">
[HTML] pobierz, plaintext 

lub

[HTML] pobierz, plaintext 
const toggleSwitch = document.getElementById('darkSwitch');
[HTML] pobierz, plaintext 

Ten post edytował LowiczakPL 10.08.2021, 07:04:38

[TakiTaki]

dzięki za odpowiedź niestety nadal taki sam problem po zmianie kodu. Nie wiem czy ma to znaczenie ale korzystam z laravela 8 mam inny projekt na 7 i nie ma takiego problemu.

Dodatkowo jeśli usunę kod odnośnie ciemnego motywu to kod up button również nie działa i pojawia się taki sam błąd "mybutton is null"

Nie wiem w czym jest problem skoro ten sam kod działał na 7.

[PHP] pobierz, plaintext 
<button onclick="topFunction()" id="myBtn">Top</button> 
[PHP] pobierz, plaintext 

[PHP] pobierz, plaintext 
var mybutton = document.getElementById("myBtn");
 
window.onscroll = function() {scrollFunction()};
 
function scrollFunction() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
 
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
 
$('.toTop').on('click', function(event) {
  event.preventDefault();
  $('html, body').animate({ scrollTop: 0 }, 'slow');         
});
[PHP] pobierz, plaintext