website/main.js

const root = document.documentElement;
const themeText = document.querySelector(".theme-text");
const themeIcon = document.querySelector(".material-icons");

const isDarkMode = () => root.classList.contains("dark");

const setDarkMode = () => {
  root.classList.add("dark");
  themeText.textContent = "Dark Mode";
  themeIcon.innerHTML = "🌙";
};

const setLightMode = () => {
  root.classList.remove("dark");
  themeText.textContent = "Light Mode";
  themeIcon.innerHTML = "☀️";
};

const toggleTheme = () => {
  if (isDarkMode()) {
    setLightMode();
    localStorage.setItem("preferredTheme", "light");
  } else {
    setDarkMode();
    localStorage.setItem("preferredTheme", "dark");
  }
};

const checkPreferredTheme = () => {
  const preferredTheme = localStorage.getItem("preferredTheme");
  if (preferredTheme === "dark") {
    setDarkMode();
  } else if (preferredTheme === "light") {
    setLightMode();
  } else {
    const prefersDarkScheme = window.matchMedia(
      "(prefers-color-scheme: dark)"
    ).matches;
    if (prefersDarkScheme) {
      setDarkMode();
    } else {
      setLightMode();
    }
  }
};

document.querySelector("#year").innerHTML = new Date().getFullYear();

checkPreferredTheme();

const themeButton = document.querySelector(".theme");
themeButton.addEventListener("click", toggleTheme);