Δεν λειτουργεί Dark mode toggle button

[atrwtos]

Έχω ενσωματώσει πριν το </body> των παρακάτω κώδικα.

function switchTheme(e) {
  if (e.target.checked) {
    document.documentElement.setAttribute('data-theme', 'dark');
    document.body.classList.add('dark-mode'); // add this line
    localStorage.setItem('theme', 'dark');
  } else {
    document.documentElement.setAttribute('data-theme', 'light');
    document.body.classList.remove('dark-mode'); // add this line
    localStorage.setItem('theme', 'light');
  }    
}

και σαν gadget τον παρακάτω κώδικα

https://safenote.co/r/640068bdc23545@52009245 (Τον έβαλα εδώ γιατί όταν τον κάνω ποστ εδώ μου εμφανίζει μήνυμα στο insomnia σφαλματος δεν επιτρέπετε η πρόσβαση)

Το κουμπί εμφανίζετε αλλά δεν λειτουργεί γιατί?? μπορεί να με πει κάποιος που γνωρίζει? 

Επεξ/σία 2 Μαρτίου 2023 από atrwtos

[k33theod]

Με λίγες μικρές διορθώσεις σε εμένα λειτούργησε.

Ο τελικός κώδικας μέσα στο script είναι αυτός

const toggleSwitch = document.querySelector('#toggle');
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
 document.documentElement.setAttribute('data-theme', currentTheme);
 if (currentTheme === 'dark') {
toggleSwitch.checked = true;
document.documentElement.setAttribute('data-theme', 'dark');
document.body.classList.add('dark-mode');
 }
}
function switchTheme(e) {
 if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
document.body.classList.add('dark-mode');
//  document.querySelector('body').setAttribute('class', 'dark-mode');
localStorage.setItem('theme', 'dark');
 } else {
document.documentElement.setAttribute('data-theme', 'light');
document.body.classList.remove('dark-mode'); // add this line
localStorage.setItem('theme', 'light')}}
toggleSwitch.addEventListener('change', switchTheme, false);

 

[atrwtos]

3 ώρες πριν, k33theod είπε

Με λίγες μικρές διορθώσεις σε εμένα λειτούργησε.

Ο τελικός κώδικας μέσα στο script είναι αυτός

const toggleSwitch = document.querySelector('#toggle');
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
 document.documentElement.setAttribute('data-theme', currentTheme);
 if (currentTheme === 'dark') {
toggleSwitch.checked = true;
document.documentElement.setAttribute('data-theme', 'dark');
document.body.classList.add('dark-mode');
 }
}
function switchTheme(e) {
 if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
document.body.classList.add('dark-mode');
//  document.querySelector('body').setAttribute('class', 'dark-mode');
localStorage.setItem('theme', 'dark');
 } else {
document.documentElement.setAttribute('data-theme', 'light');
document.body.classList.remove('dark-mode'); // add this line
localStorage.setItem('theme', 'light')}}
toggleSwitch.addEventListener('change', switchTheme, false);

 

Σε ευχαριστώ για την απάντηση ..αλλά όχι δεν λειτουργεί και μου εμφανίζει το button τετράγωνο✅επιλογής.

[k33theod]

Κάτι στον κώδικα του css τότε δεν διαβάζεται καλά από τον browser

Μπορείς να πάρεις των κώδικα από εδώ https://replit.com/@k33theod/dark-theme

css και js είναι στα αντίσοιχα files

[octa]

Κάνε και ένα clean cache ή άνοιξέ το με την ασφαλή περιήγηση