website/js/index.js

window.onload = (event) => {
  const btn = document.getElementById("theme-toggler");
  const darkTheme = window.matchMedia("(prefers-color-scheme: dark)");
  const currentTheme = sessionStorage.getItem("theme");

  if (currentTheme == "dark") {
    document.body.classList.toggle("dark");
  } else if (currentTheme == "light") {
    document.body.classList.toggle("light");
    btn.classList.toggle("rotate-180");
  }

  btn.addEventListener("click", function () {
    btn.classList.toggle("rotate-180");
    var theme = "dark";
    if (darkTheme.matches) {
      document.body.classList.toggle("light");
      theme = document.body.classList.contains("light") ? "light" : "dark";
    } else {
      document.body.classList.toggle("dark");
      theme = document.body.classList.contains("dark") ? "dark" : "light";
    }
    sessionStorage.setItem("theme", theme);
  });

  if ((document.documentElement.scrollHeight / window.screen.availHeight ) > 1.5) {
    window.addEventListener("scroll", () => {
      var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
      var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      var scrolled = (winScroll / height) * 100;
      document.getElementById('progress').style.width = scrolled + "%";

      const toTop = document.getElementById('totop');

      if ((window.scrollY > 0 && !toTop.classList.contains("show")) || (window.scrollY <= 0 && toTop.classList.contains("show"))) {
        toTop.classList.toggle("show");
      }
    });
  }
}

function toggleTableOfContent(e) {
  const toc = document.getElementById('TableOfContents');
  toc.classList.toggle("show");
  const extend = toc.parentElement.getElementsByClassName("extend")[0];
  extend.children[0].classList.toggle("icon-angle-right");
  extend.children[0].classList.toggle("icon-angle-left");
}