Zmiana dark / light w ID nie w body

Question

// ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ CHANGE THEME ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
const switchButton = document.querySelector("#ctheme");
let theme = localStorage.getItem("theme");

switchButton.addEventListener("click", () => {
    if (theme === "light") {
        document.querySelector("body").classList.remove("light");
        document.querySelector("body").classList.add("dark");
        theme = "dark";
    } else {
        document.querySelector("body").classList.remove("dark");
        document.querySelector("body").classList.add("light");
        theme = "light";
    }

    localStorage.setItem("theme", theme);
});

if (theme === "light") {
    document.querySelector("body").classList.add("light");
}

if (theme === "dark") {
    document.querySelector("body").classList.add("dark");
}

Kod wyżej służy do zmiany stylu css i sprawdza się elegancko. Jednak na tej samej stronie chciałbym użyć tego kodu do ponownego użycia z innego przycisku także zmieniłem go tak: 

// ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ CHANGE THEME ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
const switchButton = document.querySelector("#ctheme");
const switchButton2 = document.querySelector("#mctheme");
let theme = localStorage.getItem("theme");

switchButton.addEventListener("click", () => {
    if (theme === "light") {
        document.querySelector("body").classList.remove("light");
        document.querySelector("body").classList.add("dark");
        theme = "dark";
    } else {
        document.querySelector("body").classList.remove("dark");
        document.querySelector("body").classList.add("light");
        theme = "light";
    }

    localStorage.setItem("theme", theme);
});

switchButton2.addEventListener("click", () => {
    if (theme === "light") {
        document.querySelector("body").classList.remove("light");
        document.querySelector("body").classList.add("dark");
        theme = "dark";
    } else {
        document.querySelector("body").classList.remove("dark");
        document.querySelector("body").classList.add("light");
        theme = "light";
    }

    localStorage.setItem("theme", theme);
});

if (theme === "light") {
    document.querySelector("body").classList.add("light");
}

if (theme === "dark") {
    document.querySelector("body").classList.add("dark");
}

  dodałem ino linijkę

const switchButton2 = document.querySelector("#mctheme");

oraz switchButton2.addEventListener("cli.... istnieje jakaś lepsza metoda? :P   

Answer 1

Sprawdź np. taki zapis

window.addEventListener('DOMContentLoaded', DOMload);

function DOMload() {
  initializeTheme();
  // ▲▲▲▲▲▲▲▲▲ CHANGE THEME ▲▲▲▲▲▲▲▲▲
  const switchButton1 = document.querySelector("#ctheme");
  const switchButton2 = document.querySelector("#mctheme");
  switchButton1.addEventListener('click', toggleTheme);
  switchButton2.addEventListener('click', toggleTheme);  
}

function toggleTheme() {
  let theme = localStorage.getItem('theme');
  document.querySelector('body').classList.toggle(theme);
  theme = (theme == 'light')? 'dark':'light';
  document.querySelector('body').classList.toggle(theme);
  localStorage.setItem('theme', theme);
}

function initializeTheme() {
  const theme = localStorage.getItem('theme') || 'light';
  document.querySelector('body').classList.add(theme);
}

 

Comments

Dziękuje, działa razem nawet kiedy stary kod został pod inną stroną