Project-prototype-test/script.js at main · TrnLin/Project-prototype-test · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
let themeToggle = document.querySelector("#theme-toggle");

themeToggle.addEventListener("click", () => {
  themeToggle.innerHTML =
    document.documentElement.getAttribute("data-theme") === "dark"
      ? '<ion-icon name="sunny" class="text-[20px]"></ion-icon>Light'
      : '<ion-icon name="moon" class="text-[20px]"></ion-icon>Dark';
  if (document.documentElement.getAttribute("data-theme") === "dark") {
    trans();
    document.documentElement.setAttribute("data-theme", "light");
  } else {
    trans();
    document.documentElement.setAttribute("data-theme", "dark");
  }

  // themeToggle.innerHTML = document.body.classList.contains("dark")
  //   ? "Light"
  //   : "Dark";

  // if (document.body.classList.contains("light")) {
  //   trans();
  //   document.body.classList.remove("light");
  //   document.body.classList.add("dark");
  // } else {
  //   trans();
  //   document.body.classList.remove("dark");
  //   document.body.classList.add("light");
  // }
});

let trans = () => {
  document.documentElement.classList.add("transition");
  window.setTimeout(() => {
    document.documentElement.classList.remove("transition");
  }, 500);
};